Docs / Components / Pill Luxe Accordion
Pill Luxe Accordion
A frosted glass accordion with full-radius pill triggers, plus-to-close icon morph, and spring height expansion inside one luxe shell.
Pill Luxe uses a single frosted shell with full-radius triggers. The plus icon morphs into a close state while content expands with a spring layout — one panel at a time for a calm, editorial feel.
Dependencies
Install the following dependencies to use this component:
1npm install motion
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add accordion-pill-luxe
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | AccordionPillItem[] | DEFAULT_ITEMS | Array of items with id, question, and answer. |
| className | string | '' | Additional CSS classes for the wrapper. |