Docs
Accordion

Accordion

Displays a accordion or a component that looks like a accordion.

Chevron

Definitely! Our designs are lightweight, optimized, and load quickly for a smooth experience.

Plus - Minus

Definitely! Our designs are lightweight, optimized, and load quickly for a smooth experience.

Left Chevron

Definitely! Our designs are lightweight, optimized, and load quickly for a smooth experience.

Left Plus Minus

Definitely! Our designs are lightweight, optimized, and load quickly for a smooth experience.

Icon and Chevron

Definitely! Our designs are lightweight, optimized, and load quickly for a smooth experience.

Icon and Plus Minus

Definitely! Our designs are lightweight, optimized, and load quickly for a smooth experience.

Sub-header and Chevron

Secure your account with 2FA. Use Google Authenticator, Authy, SMS codes, or security keys like Designali for added protection. For maximum security, we recommend using an authenticator app.

Sub-header and Plus Minus

Enhance security with two-factor authentication. Use Google Authenticator, Authy, SMS codes, or security keys like YubiKey for added protection. We recommend an authenticator app for the most secure experience.

Icon Sub-header and Chevron

Enhance your security with two-factor authentication. Use Google Authenticator, Authy, SMS codes, or security keys like YubiKey for added protection. We recommend an authenticator app for the most secure experience.

Icon Sub-header and Plus Minus

Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.

Tabs Chevron

Yes! With features like tree-shaking, code splitting, and minimal runtime overhead, most components are under 5KB gzipped, ensuring optimal performance.

Tabs Plus Minus

Yes! With features like tree-shaking, code splitting, and minimal runtime overhead, most components are under 5KB gzipped, ensuring optimal performance.

Tabs Left Chevron

Yes! With features like tree-shaking, code splitting, and minimal runtime overhead, most components are under 5KB gzipped, ensuring optimal performance.

Tabs Left Plus Minus

Yes! With features like tree-shaking, code splitting, and minimal runtime overhead, most components are under 5KB gzipped, ensuring optimal performance.

Table Chevron

Yes! With features like tree-shaking, code splitting, and minimal runtime overhead, most components are under 5KB gzipped, ensuring optimal performance.

Table Plus Minus

Yes! With features like tree-shaking, code splitting, and minimal runtime overhead, most components are under 5KB gzipped, ensuring optimal performance.

Table Left Chevron

Yes! With features like tree-shaking, code splitting, and minimal runtime overhead, most components are under 5KB gzipped, ensuring optimal performance.

Table Left Plus Minus

Yes! With features like tree-shaking, code splitting, and minimal runtime overhead, most components are under 5KB gzipped, ensuring optimal performance.

Multi Level

Our components are tree-shakeable, keeping your bundle lightweight and efficient.

Multi-level Icon

Our components are tree-shakeable, ensuring they add minimal overhead to your application.

Installation

pnpm dlx shadcn@latest add accordion

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>
Gradient TextAlert

Not Playing

·

Spotify

·

Ali Imam