Display UI

Accordion

A collapsible UI component that expands or hides content sections, perfect for FAQs or grouped information.

Loading...

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/Accordion

Usage

import { Accordion } from "@/components/display-ui/Accordion"
<Accordion.Main>
  <Accordion.Trigger className="">What is Accordion ?</Accordion.Trigger>
 
  <Accordion.Content className="">
    <p>
      Accordion is a collapsible UI component that expands or hides content
      sections, perfect for FAQs or grouped information.
    </p>
  </Accordion.Content>
</Accordion.Main>

API

Accordion Props

For Main Accordion Content

AttributeTypeDescriptionDefault
childrenReactNode | ReactNode[]The root container for the accordion. Must wrap Accordion.Trigger and Accordion.Content components.-
variant"dark" | "light"Controls the visual theme of the accordion container."dark"
classNamestringAdditional CSS classes to customize the accordion container styling.-

For Accordion Trigger

AttributeTypeDescriptionDefault
childrenReactNodeThe content displayed inside the accordion trigger button.-
classNamestringAdditional CSS classes to customize the trigger button styling.-

For Accordion Content

AttributeTypeDescriptionDefault
childrenReactNodeThe collapsible content displayed when the accordion is expanded.-
classNamestringAdditional CSS classes to customize the accordion content area.-

Previous

Installation

Next

Alert Dialog

On this page