Things

A vertically stacked set of interactive headings that each reveal a section of content.

The Accordion component displays a vertically stacked set of interactive headings that each reveal a section of content when clicked. It supports both single and multiple open items. Built from scratch using React and native HTML elements. No UI library dependencies.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/accordion.json

Usage

tsx

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

<Accordion type="single" defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that match the other components' aesthetic.

Yes. It has smooth transitions when opening and closing.