Core Components
Number Effects
Interactive Elements
Advanced Effects
Radix UI Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- 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
- Toggle Group
- Tooltip
- Typography
Base UI Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- 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
- Toggle Group
- Tooltip
- Typography
Accordion#
A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections.
Examples#
Accordion Basic#
Accordion with icons#
You can control transformations on elements inside AccordionTrigger using group-data-[expanded]:.....
Here, we apply -rotate-180 to rotate the icon 180 degrees when its associated section is expanded.
Accordion custom variants#
Installation#
npx shadcn@latest add "https://components.dylanwlim.com/c/accordion.json"
Component API#
Accordion#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The content elements of the accordion. | |
| className | string | Optional CSS class for styling the accordion container. | |
| transition | Transition | Transition settings from motion for animation effects. | |
| variants | { expanded: Variant; collapsed: Variant } | Custom variants for expanded and collapsed states. | |
| expandedValue | React.Key | null | Controlled expanded value. | |
| onValueChange | (value: React.Key | null) => void | Callback function when the expanded value changes. |
AccordionItem#
| Prop | Type | Default | Description |
|---|---|---|---|
| value | React.Key | Unique identifier for controlling the accordion item state. | |
| children | ReactNode | The content elements of the accordion item. | |
| className | string | Optional CSS class for styling the accordion item container. |
AccordionTrigger#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Content of the trigger, typically a string or formatted text. | |
| className | string | Optional CSS class for styling the trigger element. |
AccordionContent#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The content displayed when the accordion item is expanded. | |
| className | string | Optional CSS class for styling the content container. |
Build with DWL Components
Use the copied registry, charts, blocks, and create tools in one place.
Start from the DWL Components create flow and customize from there.
Open DWL Components Create