Accordion
The Accordion component shows and hides content behind a clickable title. It animates open and close, rotates its chevron to match, and respects prefers-reduced-motion.
import React from "react";
import { Accordion } from "cherry-styled-components";
export default function Page() {
return (
<Accordion title="What is Cherry?">
Cherry is a design system for the modern web.
</Accordion>
);
}The inline variant drops the border, radius, and side padding for embedding inside cards or lists:
<Accordion title="Inline accordion" $inline>
Content
</Accordion>By default the accordion manages its own state. Pass open and onToggle to control it from the parent:
<Accordion title="Controlled" open={isOpen} onToggle={setIsOpen}>
Content
</Accordion>Properties
childrenReact.ReactNode
The collapsible content.
titleReact.ReactNode
The always-visible clickable title.
$inlineboolean
Removes the border, radius, and side padding for a flush, compact look.
defaultOpenboolean
Renders the accordion open initially (uncontrolled mode).
openboolean
Controlled open state. When provided, the parent owns open/close; pair it
with onToggle.
onToggle(isOpen: boolean) => void
Called with the next state whenever the title is clicked.
themeTheme
Cherry theme object.