Clidey UXDocs

Accordion

Accordion provides collapsible sections. Each section has a trigger that shows or hides content with a smooth animation. The chevron icon rotates 180° when open.

Interactive example#

Accordion · Live example

Your projects, people, and a shared set of defaults.

Expand each section with the pointer or Enter; use arrows between headers.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@clidey/ux';

Single open (default)#

Only one item can be open at a time:

TSX

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Clidey Design?</AccordionTrigger>
    <AccordionContent>
      Clidey Design is a React component library built on Radix UI and Tailwind CSS v4.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Does it support dark mode?</AccordionTrigger>
    <AccordionContent>
      Yes. All components support dark mode through the ThemeProvider.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>What are the peer dependencies?</AccordionTrigger>
    <AccordionContent>
      React and React DOM 18.3 or later are peer dependencies. Other required packages are installed as regular dependencies.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple open#

Allow multiple items to be open simultaneously:

TSX

<Accordion type="multiple">
  <AccordionItem value="step-1">
    <AccordionTrigger>Step 1: Install</AccordionTrigger>
    <AccordionContent>
      Run `npm install @clidey/ux` in your project.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="step-2">
    <AccordionTrigger>Step 2: Import styles</AccordionTrigger>
    <AccordionContent>
      Add `import '@clidey/ux/styles.css'` to your entry file.
    </AccordionContent>
  </AccordionItem>
</Accordion>

With default open item#

TSX

<Accordion type="single" defaultValue="item-1" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Open by default</AccordionTrigger>
    <AccordionContent>
      This item is expanded when the component first renders.
    </AccordionContent>
  </AccordionItem>
</Accordion>

FAQ pattern#

TSX

const faqs = [
  {
    q: 'Is Clidey Design free to use?',
    a: 'Yes. It is open source and licensed under Apache 2.0.',
  },
  {
    q: 'Can I use it with Next.js?',
    a: 'Yes. Import the stylesheet in your _app.tsx or layout.tsx file.',
  },
  {
    q: 'Does it work with React 19?',
    a: 'Yes. The peer dependency supports React ≥ 18.3.0, which includes React 19.',
  },
];

<Accordion type="single" collapsible className="max-w-xl">
  {faqs.map((faq, i) => (
    <AccordionItem key={i} value={`faq-${i}`}>
      <AccordionTrigger>{faq.q}</AccordionTrigger>
      <AccordionContent>{faq.a}</AccordionContent>
    </AccordionItem>
  ))}
</Accordion>

Controlled#

TSX

const [value, setValue] = useState('');

<Accordion type="single" value={value} onValueChange={setValue} collapsible>
  {/* items */}
</Accordion>

Props#

Accordion

PropTypeDefaultDescription
type"single" | "multiple""single"Whether one or multiple items can be open simultaneously.
collapsiblebooleanfalseWhen type="single", allows closing the open item by clicking its trigger again.
defaultValuestring | string[]—Item(s) open on initial render.
valuestring | string[]—Controlled open item(s).
onValueChange(value: string | string[]) => void—Called when open state changes.
classNamestring—Additional CSS classes.

AccordionItem

PropTypeDescription
valuestringUnique identifier for this item.
disabledbooleanDisables interaction with this item.
classNamestringAdditional CSS classes.

Was this page helpful?

← MenusCommandLayout →Resizable