Accordion

Component 204

About

Neobrutalism-styled accordion component.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Accordion to your project and fits it to your theme.

Code

How Accordion is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'

export const Demo = () => (
    <Accordion className="w-full lg:w-[unset]" type="single" collapsible>
        <AccordionItem className="lg:w-[500px] max-w-full" value="item-1">
            <AccordionTrigger>Is it accessible?</AccordionTrigger>
            <AccordionContent>
                Yes. It adheres to the WAI-ARIA design pattern.
            </AccordionContent>
        </AccordionItem>
    </Accordion>
)