Surfaces

Accordion

Ruled rows. The plus turns to a cross in three frames.

You do. The CLI copies each file into your project.

npx shadcn@latest add https://ui.netm8.com/r/accordion.json

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion"

export default function AccordionDemo() {
  return (
    <Accordion defaultValue={["own"]} className="w-80">
      <AccordionItem value="own">
        <AccordionTrigger>Who owns the code?</AccordionTrigger>
        <AccordionPanel>You do. The CLI copies each file into your project.</AccordionPanel>
      </AccordionItem>
      <AccordionItem value="theme">
        <AccordionTrigger>How do I theme it?</AccordionTrigger>
        <AccordionPanel>Set an ink, a paper and a lamp colour.</AccordionPanel>
      </AccordionItem>
      <AccordionItem value="light">
        <AccordionTrigger>Is there a light mode?</AccordionTrigger>
        <AccordionPanel>Paper tone is ink tone with ground and figure swapped.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  )
}

@base-ui/reactlucide-react