Accordion | Community Components | 21st

/Accordion/

Accordion

Here is Accordion component

Loading preview...

import BasicAccordion from "@/components/ui/accordion-1";

export default function DemoOne() {
  return <BasicAccordion />;
}

More examples

Accordion plus minusOpen page →

Loading preview...

Accordion left chveronOpen page →

Loading preview...

Accordion left plus minusOpen page →

Loading preview...

Accordion icon and chevronOpen page →

Loading preview...

Accordion icon and plus minusOpen page →

Loading preview...

Accordion sub header and chevronOpen page →

Loading preview...

Accordion sub header and plus minusOpen page →

Loading preview...

Accoridon icon sub header and chevronOpen page →

Loading preview...

Accordion icon, sub header, and plus minusOpen page →

Loading preview...

Accordion Tabs w chevronOpen page →

Loading preview...

Accordion Tabs w plus minusOpen page →

Loading preview...

Accordion w left chevron Open page →

Loading preview...

Accordion Tabs w left plus minusOpen page →

Loading preview...

Accordion Table w chevronOpen page →

Loading preview...

Accordion Table w left chevronOpen page →

Loading preview...

Table w left plus minus accordionOpen page →

Loading preview...

Accordion multi level Open page →

Loading preview...

Multi level w icon AccordionOpen page →

Loading preview...

Dependencies

lucide-react @ark-ui/react

Source

tarkui.com

Published

8/29/2025

Dependencies

Tags

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Dependencies

Tags

Accordion

More examples

Dependencies

Source

Published

Similar components