Accordions

Accordions show and hide content behind a clickable title, keeping dense pages scannable. The chevron rotates to mirror the open state, and the open and close motion is animated.

States

When customizing your designs, consider all the different states that accordions can have:

1. Normal - The default appearance of the accordion.
2. Hover :hover - When the user hovers the cursor over the title.
3. Focus - When the accordion title gains focus.
4. Open / Closed - The content expands or collapses, and the chevron rotates to match.

Variations

• Card - A bordered, rounded surface with generous padding. Use it when the accordion stands on its own.
• Inline - No border, radius, or side padding. Use it inside cards, lists, or other surfaces that already provide their own container. Enabled in code with the $inline prop.

In code, both variations use the same Accordion component:

import { Accordion } from "cherry-styled-components";

<Accordion title="Title">Content</Accordion>;

The accordion manages its own open state and starts closed; use defaultOpen to start it open, or pass open together with onToggle to control it from the parent.