Accordion

An accessible Base UI accordion with controlled and uncontrolled state, four visual variants, interruptible disclosure transitions, and reduced-motion support.

Library

Sona UI

Framework

React

Type

ui

License

MIT

Dependencies

@base-ui/react, class-variance-authority

Install

npx shadcn@latest add @sona-ui/accordion

Files

• src/registry/sonaui/accordion/accordion.tsx
• src/registry/sonaui/accordion/animated-plus-minus-button.tsx
• src/registry/sonaui/accordion/styles.module.css
• src/registry/sonaui/sona-utils/sona-utils.ts
• src/lib/sona-utils.ts

Source

https://github.com/Dinil-Thilakarathne/sona-ui

Categories

• Accordion Components
• React Accordion Components
• Tailwind CSS Accordion Components
• Animated Accordion Components
• Collapsible Components
• React Collapsible Components
• Tailwind CSS Collapsible Components
• Animated Collapsible Components
• Data Display Components
• React Data Display Components
• Tailwind CSS Data Display Components
• Animated Data Display Components

More from Sona UI

• Activity Graph
• Animated Checkbox
• Animated Dialog
• Animated Dropdown
• Animated Segmented Control
• Animated Switch
• Animated Tabs
• Assignment Cluster
• Avatar Showcase
• BubbleUpButton
• Button
• Chip