Stalk UI

Component

Collapsible

Toggles the visibility of a single content region.

Install

Run the CLI to copy the source into your project.

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

Examples

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

Theme
<Collapsible>
  <Collapsible.Trigger>Show details</Collapsible.Trigger>
  <Collapsible.Content>Hidden content that toggles open.</Collapsible.Content>
</Collapsible>
Theme
<Collapsible defaultOpen>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>Visible from the start.</Collapsible.Content>
</Collapsible>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`variant``CollapsibleVariant`No-Visual treatment for the root container. \`card\` adds a bordered, padded surface;<br /> \`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/collapsible.json`
  • Recipe: `collapsible`
  • Files: `src/components/ui/collapsible.tsx`