Accordion
Animated React accordion with smooth expand/collapse transitions. Accessible, keyboard-navigable FAQ component built on Radix UI with Motion animations.
Frequently Asked Questions
SmoothUI is a collection of beautifully animated React components built with Framer Motion and Tailwind CSS.
Each component is designed with smooth animations and modern design principles in mind.
You can install SmoothUI using npm or yarn:
npm install @repo/smoothuiYes! All components accept className props and can be customized with Tailwind CSS classes.
You can also modify the animation properties and styling to match your design system.
Installation
npx smoothui-cli add basic-accordionFeatures
- Collapsible content sections
- Keyboard navigation support
- Customizable styling
- Single or multiple item selection
- Smooth animations
- Built on Radix UI Accordion
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
Tab | Moves focus to the next accordion header button |
Enter / Space | Toggles the focused accordion item open or closed |
ARIA Attributes
| Attribute | Element | Purpose |
|---|---|---|
aria-expanded | Header button | Indicates whether the associated section is open or closed |
aria-controls | Header button | References the id of the collapsible content region |
aria-labelledby | Content region | References the id of the header button that controls it |
role="region" | Content panel | Identifies the expandable content area as a landmark region |
Screen Reader
- Each header button announces its expanded or collapsed state
- Content regions are associated with their header via
aria-labelledby
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, expand/collapse and chevron rotation animations are disabled instantly.