Accordion

1import {2  Accordion,3  AccordionContent,4  AccordionItem,5  AccordionTrigger,6} from "@/components/ui/accordion"78export function Example() {9  return (10    <Accordion type="single" collapsible defaultValue="item-1">11      <AccordionItem value="item-1">12        <AccordionTrigger>What ships in the box?</AccordionTrigger>13        <AccordionContent>14          Source files you own. Install a component, then edit it like any15          other file in your app.16        </AccordionContent>17      </AccordionItem>18      <AccordionItem value="item-2">19        <AccordionTrigger>Will this lock me to one stack?</AccordionTrigger>20        <AccordionContent>21          It targets React. The rest of your tooling stays yours — bundler,22          router, and styling approach included.23        </AccordionContent>24      </AccordionItem>25      <AccordionItem value="item-3">26        <AccordionTrigger>How do I pull a new piece in?</AccordionTrigger>27        <AccordionContent>28          Run the CLI against the registry. The component lands in your repo29          ready to customize.30        </AccordionContent>31      </AccordionItem>32    </Accordion>33  )34}

1import {2  Accordion,3  AccordionContent,4  AccordionItem,5  AccordionTrigger,6} from "@/components/ui/accordion"78export function Example() {9  return (10    <Accordion type="single" collapsible defaultValue="item-1">11      <AccordionItem value="item-1">12        <AccordionTrigger>What ships in the box?</AccordionTrigger>13        <AccordionContent>14          Source files you own. Install a component, then edit it like any15          other file in your app.16        </AccordionContent>17      </AccordionItem>18      <AccordionItem value="item-2">19        <AccordionTrigger>Will this lock me to one stack?</AccordionTrigger>20        <AccordionContent>21          It targets React. The rest of your tooling stays yours — bundler,22          router, and styling approach included.23        </AccordionContent>24      </AccordionItem>25      <AccordionItem value="item-3">26        <AccordionTrigger>How do I pull a new piece in?</AccordionTrigger>27        <AccordionContent>28          Run the CLI against the registry. The component lands in your repo29          ready to customize.30        </AccordionContent>31      </AccordionItem>32    </Accordion>33  )34}

1import {2  Accordion,3  AccordionContent,4  AccordionItem,5  AccordionTrigger,6} from "@/components/ui/accordion"78export function Example() {9  return (10    <Accordion type="multiple" defaultValue={["item-1", "item-2"]}>11      <AccordionItem value="item-1">12        <AccordionTrigger>Keyboard and screen readers</AccordionTrigger>13        <AccordionContent>14          Each trigger is a button with expanded state, and panels are exposed15          as labelled regions.16        </AccordionContent>17      </AccordionItem>18      <AccordionItem value="item-2">19        <AccordionTrigger>Open more than one panel</AccordionTrigger>20        <AccordionContent>21          Pass type="multiple" when sections should stay open side by side.22        </AccordionContent>23      </AccordionItem>24      <AccordionItem value="item-3">25        <AccordionTrigger>Motion without extra packages</AccordionTrigger>26        <AccordionContent>27          Height animates with CSS grid rows — no Framer or Radix required.28        </AccordionContent>29      </AccordionItem>30    </Accordion>31  )32}

1import {2  Accordion,3  AccordionContent,4  AccordionItem,5  AccordionTrigger,6} from "@/components/ui/accordion"78export function Example() {9  return (10    <Accordion type="single" collapsible defaultValue="item-1">11      <AccordionItem value="item-1">12        <AccordionTrigger>Available right now</AccordionTrigger>13        <AccordionContent>14          This panel opens and closes like any other item.15        </AccordionContent>16      </AccordionItem>17      <AccordionItem value="item-2" disabled>18        <AccordionTrigger>Coming in a later drop</AccordionTrigger>19        <AccordionContent>20          Disabled items stay closed and cannot be toggled.21        </AccordionContent>22      </AccordionItem>23      <AccordionItem value="item-3">24        <AccordionTrigger>Where do tokens live?</AccordionTrigger>25        <AccordionContent>26          Theme values sit in your CSS variables — tweak once, every surface27          follows.28        </AccordionContent>29      </AccordionItem>30    </Accordion>31  )32}

1import {2  Accordion,3  AccordionContent,4  AccordionItem,5  AccordionTrigger,6} from "@/components/ui/accordion"78export function Example() {9  return (10    <Accordion type="single" collapsible defaultValue="item-1">11      <AccordionItem value="item-1">12        <AccordionTrigger indicator="plus">13          Expand with a plus mark14        </AccordionTrigger>15        <AccordionContent>16          The vertical stroke rotates into the horizontal one so plus becomes17          minus without swapping icons.18        </AccordionContent>19      </AccordionItem>20      <AccordionItem value="item-2">21        <AccordionTrigger indicator="plus">22          Same behavior, different cue23        </AccordionTrigger>24        <AccordionContent>25          Useful when a chevron feels too navigational and you want an add /26          remove hint instead.27        </AccordionContent>28      </AccordionItem>29      <AccordionItem value="item-3">30        <AccordionTrigger indicator="plus">31          Still one accordion32        </AccordionTrigger>33        <AccordionContent>34          indicator only changes the end mark — open state and content stay the35          same.36        </AccordionContent>37      </AccordionItem>38    </Accordion>39  )40}

1import {2  Accordion,3  AccordionContent,4  AccordionItem,5  AccordionTrigger,6} from "@/components/ui/accordion"78export function Example() {9  return (10    <Accordion type="single" collapsible defaultValue="item-1">11      <AccordionItem value="item-1">12        <AccordionTrigger icon={<BoxIcon />}>13          Packages and installs14        </AccordionTrigger>15        <AccordionContent>16          Drop components into your project tree. No opaque runtime package17          sitting between you and the markup.18        </AccordionContent>19      </AccordionItem>20      <AccordionItem value="item-2">21        <AccordionTrigger icon={<CodeIcon />}>22          Edit the source directly23        </AccordionTrigger>24        <AccordionContent>25          Rename props, restyle triggers, or strip pieces you do not need —26          it is just React.27        </AccordionContent>28      </AccordionItem>29      <AccordionItem value="item-3">30        <AccordionTrigger icon={<SparkIcon />}>31          Shape it to your product32        </AccordionTrigger>33        <AccordionContent>34          Pair icons, copy, and layout chrome however your docs or app need.35        </AccordionContent>36      </AccordionItem>37    </Accordion>38  )39}

1import {2  Accordion,3  AccordionContent,4  AccordionItem,5  AccordionTrigger,6} from "@/components/ui/accordion"78export function Example() {9  return (10    <Accordion11      type="single"12      collapsible13      defaultValue="item-1"14      className="rounded-md border border-foreground/10 px-3"15    >16      <AccordionItem value="item-1">17        <AccordionTrigger>Give it a hard edge</AccordionTrigger>18        <AccordionContent>19          A light border frames the stack when the page needs a clearer block.20        </AccordionContent>21      </AccordionItem>22      <AccordionItem value="item-2">23        <AccordionTrigger>Keep pieces separate</AccordionTrigger>24        <AccordionContent>25          Trigger, content, and item stay independent so chrome never leaks into26          behavior.27        </AccordionContent>28      </AccordionItem>29      <AccordionItem value="item-3">30        <AccordionTrigger>Same API underneath</AccordionTrigger>31        <AccordionContent>32          Outlined is just className on the root — nothing new to learn.33        </AccordionContent>34      </AccordionItem>35    </Accordion>36  )37}

1import {2  Accordion,3  AccordionContent,4  AccordionItem,5  AccordionTrigger,6} from "@/components/ui/accordion"78export function Example() {9  return (10    <Accordion type="single" collapsible className="gap-2" defaultValue="item-1">11      <AccordionItem12        value="item-1"13        className="rounded-md border border-foreground/10 px-3 last:!border-b"14      >15        <AccordionTrigger>Each item is its own box</AccordionTrigger>16        <AccordionContent>17          Border and radius sit on AccordionItem — the root only adds gap.18        </AccordionContent>19      </AccordionItem>20      <AccordionItem21        value="item-2"22        className="rounded-md border border-foreground/10 px-3 last:!border-b"23      >24        <AccordionTrigger>Space between the cards</AccordionTrigger>25        <AccordionContent>26          gap-2 on Accordion keeps panels from touching without extra wrappers.27        </AccordionContent>28      </AccordionItem>29      <AccordionItem30        value="item-3"31        className="rounded-md border border-foreground/10 px-3 last:!border-b"32      >33        <AccordionTrigger>Combine with icons or plus</AccordionTrigger>34        <AccordionContent>35          Still the same component — stack className with icon and indicator.36        </AccordionContent>37      </AccordionItem>38    </Accordion>39  )40}

1import {2  Accordion,3  AccordionContent,4  AccordionItem,5  AccordionTrigger,6} from "@/components/ui/accordion"7import {8  Card,9  CardContent,10  CardDescription,11  CardHeader,12  CardTitle,13} from "@/components/ui/card"1415export function Example() {16  return (17    <Card className="w-full border-0">18      <CardHeader>19        <CardTitle>Registry & CLI</CardTitle>20        <CardDescription>21          Short answers for installing and owning ui pieces.22        </CardDescription>23      </CardHeader>24      <CardContent>25        <Accordion type="single" collapsible defaultValue="item-1">26          <AccordionItem value="item-1">27            <AccordionTrigger>What does add actually do?</AccordionTrigger>28            <AccordionContent>29              It copies the component source into your project and wires any30              local imports it needs.31            </AccordionContent>32          </AccordionItem>33          <AccordionItem value="item-2">34            <AccordionTrigger>Can I change files after install?</AccordionTrigger>35            <AccordionContent>36              Yes. Once it is in your tree it is yours — no upstream unlock step.37            </AccordionContent>38          </AccordionItem>39          <AccordionItem value="item-3">40            <AccordionTrigger>Do I need a private registry?</AccordionTrigger>41            <AccordionContent>42              Not to start. Use the public set first; host your own when you want43              internal blocks.44            </AccordionContent>45          </AccordionItem>46        </Accordion>47      </CardContent>48    </Card>49  )50}

1import {2  Accordion,3  AccordionContent,4  AccordionItem,5  AccordionTrigger,6} from "@/components/ui/accordion"78export function Example() {9  return (10    <Accordion type="multiple" defaultValue={["item-1"]}>11      <AccordionItem value="item-1">12        <AccordionTrigger>Getting started</AccordionTrigger>13        <AccordionContent unmountOnExit>14          <Accordion type="multiple" className="pl-3">15            <AccordionItem value="setup">16              <AccordionTrigger>Install the package</AccordionTrigger>17              <AccordionContent>18                Pull the component with the CLI, then import it like any other19                local file.20              </AccordionContent>21            </AccordionItem>22            <AccordionItem value="theme">23              <AccordionTrigger>Wire your theme</AccordionTrigger>24              <AccordionContent>25                Map tokens once in CSS. Nested panels inherit the same surface26                and type styles.27              </AccordionContent>28            </AccordionItem>29          </Accordion>30        </AccordionContent>31      </AccordionItem>32      <AccordionItem value="item-2">33        <AccordionTrigger>Composition</AccordionTrigger>34        <AccordionContent unmountOnExit>35          <Accordion type="multiple" className="pl-3">36            <AccordionItem value="nest">37              <AccordionTrigger>Why nest at all?</AccordionTrigger>38              <AccordionContent>39                Put another Accordion inside AccordionContent when a section40                needs its own open state.41              </AccordionContent>42            </AccordionItem>43            <AccordionItem value="offset">44              <AccordionTrigger>Keep a small indent</AccordionTrigger>45              <AccordionContent>46                A light pl on the inner root shows hierarchy without changing47                the look of the triggers.48              </AccordionContent>49            </AccordionItem>50          </Accordion>51        </AccordionContent>52      </AccordionItem>53      <AccordionItem value="item-3">54        <AccordionTrigger>Still one primitive</AccordionTrigger>55        <AccordionContent>56          Outer and inner stacks are the same Accordion — only placement57          changes.58        </AccordionContent>59      </AccordionItem>60    </Accordion>61  )62}

1import {2  Accordion,3  AccordionContent,4  AccordionItem,5  AccordionTrigger,6} from "@/components/ui/accordion"78function MiniCard({9  title,10  description,11}: {12  title: string13  description: string14}) {15  return (16    <div className="rounded-md border border-foreground/10 p-3">17      <p className="text-sm font-medium tracking-wide text-foreground">{title}</p>18      <p className="mt-1 text-[12px] leading-relaxed tracking-wide text-foreground/50">19        {description}20      </p>21    </div>22  )23}2425export function Example() {26  return (27    <Accordion type="single" collapsible defaultValue="item-1">28      <AccordionItem value="item-1">29        <AccordionTrigger>Starter blocks</AccordionTrigger>30        <AccordionContent>31          <div className="grid grid-cols-2 gap-2 pt-1">32            <MiniCard title="Auth shell" description="Sign-in layout with room for providers." />33            <MiniCard title="Settings" description="Account, billing, and preference sections." />34            <MiniCard title="Empty state" description="First-run copy and a single action." />35            <MiniCard title="Data table" description="Dense rows with filters above." />36          </div>37        </AccordionContent>38      </AccordionItem>39      <AccordionItem value="item-2">40        <AccordionTrigger>Charts & metrics</AccordionTrigger>41        <AccordionContent>42          <div className="grid grid-cols-2 gap-2 pt-1">43            <MiniCard title="Spark line" description="Inline trend without a full chart page." />44            <MiniCard title="KPI strip" description="Three numbers with quiet labels." />45            <MiniCard title="Range compare" description="This week versus last week." />46            <MiniCard title="Breakdown" description="Simple share of traffic by source." />47          </div>48        </AccordionContent>49      </AccordionItem>50      <AccordionItem value="item-3">51        <AccordionTrigger>Docs patterns</AccordionTrigger>52        <AccordionContent>53          <div className="grid grid-cols-2 gap-2 pt-1">54            <MiniCard title="Install card" description="Command plus short context." />55            <MiniCard title="API strip" description="Prop name and one-line meaning." />56            <MiniCard title="Preview frame" description="Live demo with code under it." />57            <MiniCard title="Token table" description="Name, value, and where it lands." />58          </div>59        </AccordionContent>60      </AccordionItem>61    </Accordion>62  )63}