Neo Accordion

Neo Accordion

Expandable content panels with bold brutalist styling

1
import { NeoAccordion } from "@/components/ui/neo-accordion"
2
3
export function NeoAccordionDemo() {
4
  return (
5
    <NeoAccordion
6
      items={[
7
        { value: 'item-1', title: 'What is Neo-Brutalism?', children: 'A design style featuring bold colors, thick borders, and hard shadows.' },
8
        { value: 'item-2', title: 'When should I use it?', children: 'When you want a bold, eye-catching, and playful interface.' },
9
        { value: 'item-3', title: 'Is it accessible?', children: 'Yes! This component follows WAI-ARIA accordion patterns.' },
10
      ]}
11
    />
12
  )
13
}
1
<NeoAccordion
2
  items={[
3
    { value: 'item-1', title: 'What is Neo-Brutalism?', children: 'A design style featuring bold colors, thick borders, and hard shadows.' },
4
    { value: 'item-2', title: 'When should I use it?', children: 'When you want a bold, eye-catching, and playful interface.' },
5
    { value: 'item-3', title: 'Is it accessible?', children: 'Yes! This component follows WAI-ARIA accordion patterns.' },
6
  ]}
7
/>

Installation

npx shadcn@latest add https://grainio.vercel.app/r/NeoBrutalism/NeoAccordion.json

Examples

Variants

1
<NeoAccordion
2
  items={[
3
    { value: 'a1', title: 'First Item', children: 'Content for first item' },
4
    { value: 'a2', title: 'Second Item', children: 'Content for second item' },
5
  ]}
6
/>
7
<NeoAccordion
8
  variant="separated"
9
  items={[
10
    { value: 'b1', title: 'First Item', children: 'Content for first item' },
11
    { value: 'b2', title: 'Second Item', children: 'Content for second item' },
12
  ]}
13
/>

Multiple Selection

I can be open with others!
Multiple items can be open at once.
1
<NeoAccordion
2
  type="multiple"
3
  defaultValue={['m1', 'm2']}
4
  items={[
5
    { value: 'm1', title: 'Expand Me', children: 'I can be open with others!' },
6
    { value: 'm2', title: 'Me Too', children: 'Multiple items can be open at once.' },
7
    { value: 'm3', title: 'And Me', children: 'Just set type="multiple".' },
8
  ]}
9
/>