Accordion Demo

1"use client";
2 
3import {
4  Accordion,
5  type AccordionItemData,
6} from "@/components/sora-ui/disclosure/accordion";
7 
8const FAQ_ITEMS: AccordionItemData[] = [
9  {
10    title: "What is Sora UI?",
11    content:
12      "Sora UI is an animated component registry for React and Next.js. It ships copy-paste primitives built on Motion and GSAP, with live docs, demos, and a shadcn-compatible install flow so you can add polished UI effects directly into your project.",
13    defaultOpen: true,
14  },
15  {
16    title: "How do I install a component?",
17    content:
18      "Initialize shadcn/ui in your app, then run the add command with the Sora UI registry scope—for example, npx shadcn@latest add @soralabs/accordion. The CLI copies the source into your project so you own and can customize every file.",
19  },
20  {
21    title: "Can I customize the styles?",
22    content:
23      "Yes. Components are added as source files in your codebase, not as an opaque npm package. Tweak Tailwind classes, variants, and tokens to match your design system. Primitives also expose CVA variant helpers you can extend.",
24    enableStagger: true,
25  },
26  {
27    title: "What animation library does Sora UI use?",
28    content:
29      "Most primitives use Motion (motion/react)—timelines, springs, and layout animations composed with Motion APIs. Scroll-driven text like Text Reveal Block uses GSAP SplitText and ScrollTrigger. Wrap your app in MotionConfig with reducedMotion set to user for accessible defaults.",
30    enableStagger: true,
31  },
32];
33 
34export default function AccordionExample() {
35  return (
36    <div className="mx-auto w-full max-w-2xl px-4 py-8">
37      <Accordion items={FAQ_ITEMS} />
38    </div>
39  );
40}