mischief
exampleaccordion-demosource: ok · hit
Accordion Demo
A worked example of Accordion: A list of disclosures built on native details elements, so find-in-page and the browser do the work.
npx shadcn add "https://ui.tinkererslabs.com/r/accordion-demo.json"free
Interaction
accordion
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightRegistry dependencies
https://ui.tinkererslabs.com/r/accordion.json
Files1 · source cached 10/14/2026, 3:01:59 PM
components/demos/accordion-demo.tsx
"use client"
import { Accordion } from "@/registry/default/accordion/accordion"
const items = [
{
id: "licence",
title: "Is it free to use?",
content:
"Yes. Everything here is MIT licensed, for personal and commercial work alike. Keep the notice and you are done.",
},
{
id: "theme",
title: "Will it match my theme?",
content:
"Components use semantic shadcn tokens, so they inherit whatever background, foreground, and border you already have.",
},
{
id: "registry",
title: "Registry or npm?",
content:
"Take the source through the registry when you plan to change it. Install from npm when you would rather have versioned updates.",
},
]
export function AccordionDemo() {
return (
<div className="w-full max-w-lg">
<Accordion items={items} defaultOpen={["licence"]} />
</div>
)
}