Stacked headings that each reveal a panel, in three looks: Classic, Soft and Editorial.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/accordionPlayground
Account and billing
Click Forgot password on the sign in page and enter your email. We’ll send a reset link that expires in 24 hours.
Yes. Open Billing, pick a plan, and the change applies from the next cycle.
Cards, mobile wallets and bank transfer on yearly plans.
Data is encrypted in transit and at rest.
Classic
Click Forgot password on the sign in page and enter your email. We’ll send a reset link that expires in 24 hours.
Yes. Open Billing, pick a plan, and the change applies from the next cycle.
Cards, mobile wallets and bank transfer on yearly plans.
Data is encrypted in transit and at rest.
Soft
Account and billing
Click Forgot password on the sign in page and enter your email. We’ll send a reset link that expires in 24 hours.
Yes. Open Billing, pick a plan, and the change applies from the next cycle.
Cards, mobile wallets and bank transfer on yearly plans.
Data is encrypted in transit and at rest.
Soft, no header
Click Forgot password on the sign in page and enter your email. We’ll send a reset link that expires in 24 hours.
Yes. Open Billing, pick a plan, and the change applies from the next cycle.
Cards, mobile wallets and bank transfer on yearly plans.
Data is encrypted in transit and at rest.
Editorial, opens on hover or focus
A designer and engineer based between product and code.
AI and SaaS products, from the pulse of user needs to the forefront of technology.
Systems, motion and the details between them.
Disabled, Loading and Locked
Click Forgot password on the sign in page and enter your email. We’ll send a reset link that expires in 24 hours.
Click Forgot password on the sign in page and enter your email. We’ll send a reset link that expires in 24 hours.
Activate the locked row to open an upsell.
Multiple
Click Forgot password on the sign in page and enter your email. We’ll send a reset link that expires in 24 hours.
Yes. Open Billing, pick a plan, and the change applies from the next cycle.
Cards, mobile wallets and bank transfer on yearly plans.
Data is encrypted in transit and at rest.
Style
Mode
Icons animation
Header
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/accordion
Classic
For settings and FAQs. Headings with hairlines between them.
Click Forgot password on the sign in page and enter your email. We’ll send a reset link that expires in 24 hours.
Yes. Open Billing, pick a plan, and the change applies from the next cycle.
Cards, mobile wallets and bank transfer on yearly plans.
Data is encrypted in transit and at rest.
Mode
Motion
Accessibility
- Each trigger is a button in a heading with aria-expanded and aria-controls.
- The panel is a region labelled by its trigger.
- Disabled uses aria-disabled and is skipped. Loading sets aria-busy.
- Locked items stay focusable and open your upsell.
Motion
- The panel grows in 260 ms, then content fades and rises 4 px after 60 ms.
- The chevron turns 180 degrees in 200 ms and the Soft card lifts in 200 ms.
- Titles roll to a copy of themselves on hover and focus, as in FAQ · Boxed.
- Closing runs shorter: content first in 120 ms, then height in 180 ms.
- Editorial opens after 120 ms of hover intent, in 300 ms.
- A locked trigger nudges 3 px in 240 ms before the upsell.
- With reduced motion, height jumps, content crossfades in 120 ms and the loader spins at half speed.
Responsive behavior
- 48 px rows and 15 px titles on Web. 56 px rows and 16 px titles on Mobile.
- Editorial opens on tap on Mobile.
Performance
- Closed panels stay mounted but inert, so their content keeps its state and leaves the tab order.
- Editorial opens after a 120 ms hover intent, and the timer clears when the pointer leaves.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Accordion and the AccordionItem type. Props: items, styleKind (classic, soft, editorial), type, value, defaultValue, onValueChange, header, headingLevel, onLocked.
- Each item has value, title, children, and optional disabled, loading and locked.
- header shows on Soft only. Set headingLevel to fit the page.
- onLocked opens your upsell. The demo only prints a message.
Related
CollapsibleComponentA trigger on the Soft tray and an inset card that opens in place.TabsComponentSwitch between views of the same thing. Panels swipe with the finger and the indicator follows.Expandable TextComponentCopy clamped on a line boundary that unrolls from where you were reading.FAQ · BoxedProBlockCentered heading and boxed questions.CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.