Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
PreviewFeatures
Supports single or multiple item expansion modes
Built with Radix UI Accordion primitive for robust functionality
Fully keyboard accessible with arrow navigation
Smooth animations for expand and collapse transitions
Customizable trigger and content styling
Optional default expanded state for initial page load
Shadcn/ui Accordion - Figma Component
A vertically stacked set of interactive headings that each reveal a section of content. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.
Every Accordion variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.
Your questions, answered
Browse all 58 components
Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Form
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toast
Toggle Group
Toggle
Tooltip
Designing FAQ sections with Accordion
The shadcn/ui Figma Accordion is perfect for creating FAQ sections in your designs. Use it to organize questions in a clean, space-saving layout where answers stay hidden until clicked. This shadcn figma component lets you prototype both single and multiple expansion modes right in Figma, so you can test which works better for your users before building.
Accordion design in Figma
Design better accordions in Figma by grouping related content under clear headers and keeping trigger text descriptive. This shadcn/ui figma component includes all the variants you need to show different states. Avoid burying critical information in collapsed sections—accordions work best for secondary content and detailed explanations.
Shadcn Figma Accordion variants
Our shadcn figma Accordion component matches the code implementation exactly, including hover states, focus indicators, and smooth animations. Design with confidence knowing your Figma prototypes will look identical when developers implement them using shadcn/ui React components.
Mobile accordion design
Design mobile-friendly accordions in Figma with proper touch targets and spacing. The shadcn/ui figma Accordion includes mobile variants optimized for smaller screens. Single-expansion mode typically works better on mobile to prevent excessive scrolling through your designs.