Expandable sections with single or multiple open items.
Install with the CLI, or copy the component source into your project.
Add accordion (npm)
npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add accordion
Single open item with dividers inside a bordered card. The last row has no trailing divider.
Keep several panels open at once with type multiple.
With collapsible false, single mode always keeps one item open.
Pass any React node to leading on AccordionTrigger. Body text aligns under the title.
Add a secondary line under the title. Combine with leading and a custom indicator when needed.
Pass meta for dates or counts before the chevron.
Extra small, small, default, and large trigger density.
Corner radius on the root. Default is 3xl. Pass none for square corners.
Shared header fill on every trigger, with a lighter panel fill on open items. Uses theme semantic colors so light and dark both stay readable. contentPadding insets the panel without changing regular accordion size padding.
Disconnected cards with a gap between items. Each row owns its own border and radius.
Flush embed with list dividers. Set showDividers to false for an unbroken list.
Disable a single item while leaving the rest interactive.
Drive open state with value and onValueChange.
Open value: alpha
Expandable sections for FAQs, changelogs, and settings groups. Compose Accordion, AccordionItem, AccordionTrigger, and AccordionContent. Supports single or multiple open items, sizes, dividers, and keyboard focus between triggers.
| Prop | Type | Default | Notes |
|---|---|---|---|
| type | "single" | "multiple" | "single" | single opens one item at a time. multiple lets several items stay open. |
| collapsible | boolean | true | For type single only. When true, clicking the open item closes it. When false, one item always stays open. |
| variant | "default" | "ghost" | "separated" | "default" | default is a connected list with dividers. ghost is a flush embed. separated renders each item as its own bordered card with a gap between rows (dividers off by default). |
| size | "xs" | "sm" | "default" | "lg" | "default" | Trigger padding and title or content type scale. |
| radius | "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "3xl" | Corner radius step on the root. Maps to a --radius-* token (default --radius-3xl). Steps scale from the project --radius set at create or init. Use none for square corners. |
| background | string | - | Root shell fill. Prefer theme semantics such as var(--card). Sets --df-accordion-bg. |
| triggerBackground | string | - | Header fill for every trigger. Runs edge to edge on connected and ghost variants (inline padding lives on the trigger). Prefer theme semantics such as var(--muted) so light and dark stay readable. Absolute neutrals stay fixed and can break on dark surfaces. Sets --df-accordion-trigger-bg. Override per row with AccordionTrigger background. |
| contentBackground | string | - | Open panel fill for every item. Runs edge to edge on connected and ghost variants (inline padding lives on the content body). Prefer a theme-aware mix such as color-mix(in oklch, var(--muted) 40%, var(--card)). Absolute neutrals stay fixed and can break on dark surfaces. Sets --df-accordion-content-bg. Override per row with AccordionContent background. |
| contentPadding | "none" | "sm" | "default" | "lg" | - | Block padding on open panels only. Omit to keep the size-based bottom padding used by regular accordions. Set when using contentBackground so filled panels can inset without changing default size spacing. |
| showDividers | boolean | true (false when variant is separated) | Draw a hairline under each item. The last item never shows a trailing divider. Separated defaults to false unless you set this explicitly. |
| disabled | boolean | false | Disable every item in the accordion. |
| value | string | null | string[] | - | Controlled open state. string or null for single; string array for multiple. |
| defaultValue | string | null | string[] | - | Uncontrolled initial open state. |
| onValueChange | (value: string | null) => void | (value: string[]) => void | - | Called when open state changes. |
| className | string | - | Additional styles on the root. |
One expandable row. Owns the value shared by its trigger and content.
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | - | Unique item value (required). |
| disabled | boolean | - | Non interactive item. Trigger stays closed. |
| id | string | - | Optional DOM id on the item wrapper. |
| className | string | - | Additional styles on the item. |
Button that toggles the item. Supports title, subtitle, meta, leading, and a custom indicator.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Trigger title. |
| subtitle | ReactNode | - | Secondary line under the title. Pass text or any React node. |
| meta | ReactNode | - | Optional trailing metadata before the indicator (for example a date). |
| leading | ReactNode | - | Optional leading icon or mark before the title. Pass any React node. When set, panel body text indents to align under the title. |
| indicator | ReactNode | null | - | Replace the default chevron. Pass null to hide the indicator. |
| background | string | - | Header fill for this trigger only. Prefer theme semantics such as var(--muted). Sets --df-accordion-trigger-bg on the button. |
| disabled | boolean | - | Disable this trigger only. |
| className | string | - | Additional styles on the trigger button. |
Animated panel for the item body. Uses grid row expand and collapse with reduced motion support.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Panel body. |
| background | string | - | Panel fill for this content only. Prefer a theme-aware mix with var(--muted) and var(--card). Sets --df-accordion-content-bg on the panel. |
| forceMount | boolean | true | Keep content mounted when closed so the height animation can run. Set false to unmount when closed. |
| className | string | - | Additional styles on the inner content. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --radius | CSS length | 0.625rem | Base corner radius from create or init (df-ui init --radius). Every --radius-* step derives from this value. |
| --radius-3xl | CSS length | calc(var(--radius) * 2.2) | Default radius step when radius is 3xl. The radius prop selects any --radius-* step from none to full. |
| --df-accordion-bg | CSS color | transparent | Root shell fill. Set with the background prop or override on :root / the host. |
| --df-accordion-item-bg | CSS color | var(--card) | Separated item card fill. Used when variant is separated. |
| --df-accordion-trigger-bg | CSS color | transparent | Header (trigger) fill. Edge to edge on connected and ghost variants. Set with triggerBackground or AccordionTrigger background. |
| --df-accordion-content-bg | CSS color | transparent | Open panel fill. Edge to edge on connected and ghost variants. Set with contentBackground or AccordionContent background. |
| --df-accordion-pad-inline | CSS length | calc(5 * var(--spacing-unit)) | Horizontal padding on triggers and content bodies for connected and ghost variants. Keeps fills full width while inseting text. |
| --df-accordion-content-pad-block-start | CSS length | calc(5 * var(--spacing-unit)) | Top padding on open panel bodies when contentPadding is set. |
| --df-accordion-content-pad-block-end | CSS length | calc(5 * var(--spacing-unit)) | Bottom padding on open panel bodies when contentPadding is set. |
| --df-accordion-radius | CSS length | 0 | Resolved corner radius from the radius prop. Applied to the root, or to each item when variant is separated. |
| --border | CSS color | var(--df-neutral-100) | Hairline color for item dividers when showDividers is true. |
| --df-duration-panel | CSS time | 400ms | Open and close duration for the panel and chevron. |
| --df-ease-decelerate | CSS easing | cubic-bezier(0.22, 1, 0.36, 1) | Easing for the panel expand and chevron rotate. |
| --df-corner-shape | CSS corner-shape | var(--df-corner-shape-round) | Theme corner curve for all kit chrome. round = circular arcs; smooth = continuous squircle. Set with df-ui init --corner-shape, or override on :root. Default round. |