accordion

registry:ui

collapsible sections with ascii expand/collapse indicators

installation

npx shadcn@latest add https://asciicn.fldr.zip/r/accordion.json

usage

import { Accordion } from "@/registry/ascii/accordion";

const items = [
  {
    id: "item-1",
    title: "first item",
    content: "content for first item",
  },
  {
    id: "item-2",
    title: "second item",
    content: "content for second item",
  },
];

<Accordion items={items} type="single" />

examples

basic accordion

this is an accordion component built with ascii indicators. it uses ► and ▼ characters to show open/closed states.

click on any item to expand or collapse it. the component supports both single and multiple open items at once.

yes! it includes proper focus states, keyboard navigation support, and disabled states for items that shouldn't be interactive.

type: single vs multiple

single (only one open at a time)

uses ► and ▼ characters for indicators

uses » and « characters for indicators

multiple (multiple can be open)

run: npx shadcn@latest add https://asciicn.fldr.zip/r/accordion.json

no additional configuration needed. works out of the box.

import and use the accordion component with your data array.

border variants

single border (► ▼)

uses ► and ▼ characters for indicators

uses » and « characters for indicators

double border (» «)

uses ► and ▼ characters for indicators

uses » and « characters for indicators

with disabled items

this item can be opened and closed normally

you won't see this

this one works too

disabled items are shown with reduced opacity and cannot be interacted with

design details

accordion uses ascii arrow characters to indicate state:

▸single variant: ► (closed) ▼ (open)
▸double variant: » (closed) « (open)
▸smooth slide-in animation with fade effect
▸left border for visual hierarchy

character set

single indicators:

► ▼

double indicators:

» «

props

prop

type

default

description

items

array

required

accordion items

type

string

"single"

single/multiple

variant

string

"single"

indicator style

defaultValue

string|array

initially open