StacklyUI
Components/Accordion

Accordion

Vertically stacked, expandable sections.

01

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsx
render(
  <Accordion type="single" collapsible defaultValue="a" className="w-full max-w-md">
    <AccordionItem value="a">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>Yes — it's built on Radix, so keyboard and screen-reader support are handled.</AccordionContent>
    </AccordionItem>
    <AccordionItem value="b">
      <AccordionTrigger>Can I copy-paste it?</AccordionTrigger>
      <AccordionContent>Absolutely — use the registry CLI or install the package.</AccordionContent>
    </AccordionItem>
  </Accordion>
)
02

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/accordion

Or install the package and import it:

$pnpm add @stacklyui/ui motion
03

Usage

Import Accordion from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.