Accordian

Accordion component with smooth expand/collapse animations

$ npx @hritik-sharmaa/repeat-ui add commons-accordian

Live preview

Customize

Allow multiple

Variant

Icon

Accent

Radius16px

import CommonsAccordian from "@/components/repeat-ui/commons-accordian/preview";

<CommonsAccordian items={items} />

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add commons-accordian --variant ts-tailwind

The files are in components/repeat-ui/commons-accordian/.

import CommonsAccordian from "@/components/repeat-ui/commons-accordian/preview";

export default function Page() {
  return <CommonsAccordian />;
}

Prop	Type	Default	Description	Options
`items`	`AccordionItem[]`	-	Rows: { id, title, content }.	-
`allowMultiple`	`boolean`	false	Let several rows stay open at once.	-
`defaultOpen`	`(string \| number)[]`	[]	Ids of rows open at first.	-
`variant`	`"bordered" \| "separated"`	"bordered"	One bordered box, or a separate card per row.	bordered \| separated
`icon`	`"chevron" \| "plus"`	"chevron"	A chevron that flips, or a plus that turns into a cross.	chevron \| plus
`accentColor`	`string`	"#f97316"	Colour of the open row's title and icon.	-
`radius`	`number`	16	Corner radius in pixels.	-
`className`	`string`	""	Extra classes for the root element.	-