Tuimorphic

Accordion

Expandable content sections for organizing related information with terminal-style indicators.

Import

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'tuimorphic';

Usage

The Accordion component provides expandable content sections with terminal-aesthetic indicators.

<Accordion defaultValue={['item-1']}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content for section 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content for section 2</AccordionContent>
  </AccordionItem>
</Accordion>

Props

Accordion

PropTypeDefaultDescription
valuestring[]-Selected value(s) for controlled mode
defaultValuestring[]-Default open item value(s) for uncontrolled mode
onValueChange(value: string[]) => void-Callback when open items change
type'single' | 'multiple''multiple'Whether multiple items can be open at once
disabledbooleanfalseWhether the accordion is disabled
childrenReact.ReactNode-Accordion items
classNamestring-Additional CSS class names

AccordionItem

PropTypeDefaultDescription
valuestring-Unique value identifying this item (required)
disabledboolean-Whether this item is disabled
childrenReact.ReactNode-Item content (AccordionTrigger and AccordionContent)
classNamestring-Additional CSS class names

AccordionTrigger

PropTypeDefaultDescription
childrenReact.ReactNode-Trigger content
classNamestring-Additional CSS class names

AccordionContent

PropTypeDefaultDescription
childrenReact.ReactNode-Panel content
classNamestring-Additional CSS class names

Variants

Default Open

Use the defaultValue prop with an array of item values to control which accordion items are expanded when the component first renders.

<Accordion defaultValue={['item-1']}>
  <AccordionItem value="item-1">
    <AccordionTrigger>First Section (Open by Default)</AccordionTrigger>
    <AccordionContent>This section is open by default.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Second Section</AccordionTrigger>
    <AccordionContent>Content for section 2</AccordionContent>
  </AccordionItem>
</Accordion>

Single Expansion Mode

Only one item can be open at a time:

In single mode, only one section can be open at a time. Opening another section will automatically close this one.

<Accordion type="single" defaultValue={['faq-1']}>
  <AccordionItem value="faq-1">
    <AccordionTrigger>What is Tuimorphic?</AccordionTrigger>
    <AccordionContent>A terminal-aesthetic component library.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="faq-2">
    <AccordionTrigger>How do I install it?</AccordionTrigger>
    <AccordionContent>Run npm install tuimorphic.</AccordionContent>
  </AccordionItem>
</Accordion>

Controlled Mode

Manage the open state externally:

const [openItems, setOpenItems] = useState(['item-1']);
 
<Accordion value={openItems} onValueChange={setOpenItems}>
  <AccordionItem value="item-1">
    <AccordionTrigger>First Section</AccordionTrigger>
    <AccordionContent>First content</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Second Section</AccordionTrigger>
    <AccordionContent>Second content</AccordionContent>
  </AccordionItem>
</Accordion>

Previous

Divider

Next

Tabs

On this page