import { Accordion } from "@/components/godui/accordion";

export function AccordionMultiple() {
return <Accordion items={items} type="multiple" />;
}

import { Accordion } from "@/components/godui/accordion";

export function AccordionBounce() {
return <Accordion items={items} defaultValue="what" animation="bounce" />;
}

A collection of animated React components built with Tailwind CSS and Framer Motion.

Accordion

tsx

import { Accordion } from "@/components/godui/accordion";const items = [{ value: "what", title: "What is GodUI?", content: "An animated component library." },{ value: "install", title: "How do I install?", content: "Use the shadcn CLI." },];export function AccordionDemo() {return <Accordion items={items} defaultValue="what" />;}

Documentation

Learn Playground

A disclosure list with spring height animation, rotating chevrons, and single or multiple open modes.

Multiple open

type="multiple" lets any number of panels stay open at once.

Animation

animation sets the motion feel of the height transition — smooth (default, no overshoot), spring (soft overshoot), or bounce (playful).

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/accordion.json"

Usage

tsx

import { Accordion } from "@godui/components";

<Accordion
  type="single"
  defaultValue="a"
  items={[{ value: "a", title: "Question", content: "Answer" }]}
/>;

Props

Prop	Type	Default	Description
`items`	`AccordionItem[]`	—	`{ value, title, content, disabled? }`.
`type`	`"single" \| "multiple"`	`"single"`	Open behavior.
`defaultValue`	`string \| string[]`	—	Initially open value(s).
`collapsible`	`boolean`	`true`	Allow closing the open panel in single mode.
`animation`	`"smooth" \| "spring" \| "bounce"`	`"smooth"`	Motion feel of the height animation.

What is GodUI?

How do I install a component?

Is it free to use?

Accordion