Accordion

The Accordion - because sometimes your content needs to do yoga. This component is like a well-organized closet - everything's there, but it's not all hanging out at once. Perfect for FAQs, settings panels, or that one section of your app where you've crammed way too much information.

Preview

Code

Installation

First, make sure you have the required dependencies. The accordion is a bit of a social butterfly - it likes to have its friends around:

npx vynk add accordion

yarn vynk add accordion

pnpm dlx vynk add accordion

bunx --bun vynk add accordion

Usage

Here's how to make your content do the accordion dance:

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

export function AccordionDemo() {
  return (
    <Accordion type="single" collapsible className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it really that simple?</AccordionTrigger>
        <AccordionContent>
          Yes. Yes it is. No magic tricks, no hidden complexity. Just pure, unadulterated accordion goodness.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Can I customize it?</AccordionTrigger>
        <AccordionContent>
          Absolutely! It's like a chameleon, but for your UI. Change colors, sizes, animations - it's all fair game.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>What about accessibility?</AccordionTrigger>
        <AccordionContent>
          Built-in keyboard navigation, ARIA attributes, and screen reader support. We've got your back, and your users' too.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Props

The accordion comes with a few tricks up its sleeve:

Prop	Type	Required	Description
`type`	`"single" \| "multiple"`	No	Whether to allow one or multiple items to be open at once. It's like choosing between monogamy and polyamory, but for your UI
`collapsible`	`boolean`	No	Whether all items can be closed. Sometimes you need a break from all that expanding and collapsing
`defaultValue`	`string \| string[]`	No	The default open item(s). Because even accordions need a starting point
`value`	`string \| string[]`	No	The controlled value. For when you want to be the boss of your accordion
`onValueChange`	`(value: string \| string[]) => void`	No	Callback when the value changes. It's like having a spy in your accordion

Features

Smooth Animations: Transitions so smooth, they make butter jealous
Keyboard Navigation: Full keyboard support because not everyone uses a mouse (and that's okay!)
Accessible: ARIA attributes and screen reader support included, because we're not monsters
Customizable: Style it to match your brand, or make it look like it came from the future
TypeScript: Full type safety, because we like to keep things professional

Common Issues

"The accordion won't open!" - Did you wrap your content in AccordionContent? It's like trying to open a door without a handle
"The animations are janky!" - Check if you've got any CSS conflicts. The accordion is sensitive about its appearance
"It's not working with my state management!" - Remember, the accordion can be controlled or uncontrolled. Choose your own adventure!

Contributing

Found a bug? Want to make it even more flexible? Feel free to submit a PR. Just make sure your code is as clean as your browser history (which we all know is spotless, right?).

The Accordion - because sometimes less is more, but more is also more when you need it! 🪗

Vynk