Accordion

A collapsible content panel built on Radix UI Accordion with smooth animation.

Import

tsx

import { Accordion } from 'fxui-core';

Usage

tsx

<Accordion type="single" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>What is FXUI?</Accordion.Trigger>
    <Accordion.Content>
      A Neo-brutalist React component library.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>
      Yes, built on Radix UI primitives.
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Variants

tsx

{/* Grouped — single bordered container */}
<Accordion type="single" variant="default" collapsible>
  ...
</Accordion>

{/* Separated — each item has its own border */}
<Accordion type="single" variant="separated" collapsible>
  <Accordion.Item value="item-1" variant="separated">
    ...
  </Accordion.Item>
</Accordion>

Multiple Open

tsx

<Accordion type="multiple">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Section 1</Accordion.Trigger>
    <Accordion.Content>Content 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Section 2</Accordion.Trigger>
    <Accordion.Content>Content 2</Accordion.Content>
  </Accordion.Item>
</Accordion>

Default Open

tsx

<Accordion type="single" defaultValue="item-1" collapsible>
  ...
</Accordion>

API Reference

Accordion

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | 'single' \| 'multiple' | — | Single or multiple panels open at once | | variant | 'default' \| 'separated' | 'default' | Visual layout | | collapsible | boolean | false | Allow closing all panels (single mode only) | | defaultValue | string \| string[] | — | Initially open panel(s) |

Accordion.Item

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | — | Unique identifier for this item | | variant | 'default' \| 'separated' | — | Must match parent variant when using separated |