Accordion
Animated React accordion with smooth expand/collapse transitions. Accessible, keyboard-navigable FAQ component built on Radix UI with Motion animations.
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.
Props
UI Components
Browse 50+ production-ready React components with smooth animations. Buttons, inputs, modals, cards, and more. Built with TypeScript, Motion, GSAP, and Tailwind CSS. Fully accessible and customizable.
Animated Input
React text input with smooth focus animations, floating labels, and visual feedback. Modern form input component with Motion transitions for better UX.