ComponentsCore

Accordion

An Accordion is a grouping of related disclosures. It supports both single and multiple expanded items.

Example

Tone
Size
Usage

Features

Disclosure groups can be built by combining multiple disclosures built in HTML with the <details> and <summary> HTML elements, but this can be difficult to style, especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. DisclosureGroup helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy.

  • Accessible - Disclosure group is exposed to assistive technology via ARIA. Uses hidden="until-found" in supported browsers, enabling find-in-page search support and improved search engine visibility for collapsed content.
  • Styleable - Disclosures include builtin states for styling such as keyboard focus, disabled, and expanded states.

Installation

Disclosure

A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/accordion.tsx
npx @libravelui@latest add accordion

Anatomy

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/core/accordion";
<Accordion>
  <AccordionItem>
    <AccordionTrigger>Trigger goes</AccordionTrigger>
    <AccordionContent>The content goes here</AccordionContent>
  </AccordionItem>
</Accordion>

Props

Loading types…

Edit on GitHub

Dropdown Menu

A component that reveals a list of options when activated, allowing users to select one or multiple items.

Breadcrumbs

Breadcrumbs are a navigation tool that displays a sequence of links representing the hierarchical path to the current page or resource within an application. This allows clear visibility of the page's position in the overall structure.