Stalk UI

Component

Accordion

Reveals related content in vertically stacked, expandable sections.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/accordion

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Accordion type="single" collapsible defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Is it styled?</Accordion.Trigger>
    <Accordion.Content>Yes. Defaults use semantic tokens from the preset.</Accordion.Content>
  </Accordion.Item>
</Accordion>
Theme
<Accordion type="multiple" defaultValue={['a', 'b']}>
  <Accordion.Item value="a">
    <Accordion.Trigger>First section</Accordion.Trigger>
    <Accordion.Content>Multiple sections can be open at once.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="b">
    <Accordion.Trigger>Second section</Accordion.Trigger>
    <Accordion.Content>Pass type=&quot;multiple&quot; to enable this.</Accordion.Content>
  </Accordion.Item>
</Accordion>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`variant``AccordionVariant`No-Visual treatment for the root container. \`card\` adds a bordered surface and inset<br /> trigger padding; \`inline\` is unstyled chrome for embedding in arbitrary surfaces.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`variant``inline`, `card`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/accordion.json`
  • Recipe: `accordion`
  • Files: `src/components/ui/accordion.tsx`