Accordion

Progressively reveal supporting information in place.

npx shadcn@latest add @silicon-ui/accordion
disclosurelayout
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/accordion

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-accordion lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/accordion/accordion.tsx
    • components/silicon-ui/accordion/accordion.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Accordion } from "@/components/silicon-ui/accordion/accordion";

API reference

PropTypeDefault
items*AccordionItem[]—
defaultOpennumber0
size

"lg" suits page-level FAQs: questions at the large text size, answers at body size.

"md" | "lg""md"

Dependencies

npm
@radix-ui/react-accordionlucide-reactmotion
Registry
silicon-motion-tokens