Accordion

Orders ship within two business days and arrive in three to five.

Installation

npm install @radix-ui/react-accordion@^1.2.12 @tabler/icons-react@^3.36.1 class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^3.4.0

lib/icons.ts
lib/utils.ts
components/accordion/accordion.tsx
components/accordion/index.ts

Code

'use client';

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/accordion/accordion';

export default function AccordionDemo() {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue="shipping"
      className="nx:max-w-md"
    >
      <AccordionItem value="shipping">
        <AccordionTrigger>How long does shipping take?</AccordionTrigger>
        <AccordionContent>
          Orders ship within two business days and arrive in three to five.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="returns">
        <AccordionTrigger>Can I return an item?</AccordionTrigger>
        <AccordionContent>
          Unused items can be returned within 30 days for a full refund.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="support">
        <AccordionTrigger>How do I contact support?</AccordionTrigger>
        <AccordionContent>
          Email support@example.com and we reply within one business day.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Props

Accordion

Accordion props
Prop	Type	Default	Description
`variant`	`"stacked" \| "floating" \| null`	`"stacked"`	No description

AccordionContent

AccordionContent adds no props of its own; it accepts the props of the element or primitive it wraps.

AccordionItem

AccordionItem adds no props of its own; it accepts the props of the element or primitive it wraps.

AccordionTrigger

AccordionTrigger adds no props of its own; it accepts the props of the element or primitive it wraps.

Examples

Floating

'use client';

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/accordion/accordion';

export default function AccordionFloating() {
  return (
    <Accordion
      type="single"
      collapsible
      variant="floating"
      className="nx:max-w-md"
    >
      <AccordionItem value="billing">
        <AccordionTrigger>Billing</AccordionTrigger>
        <AccordionContent>
          Invoices are issued on the first of each month.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="seats">
        <AccordionTrigger>Seats</AccordionTrigger>
        <AccordionContent>
          Add or remove seats at any time; changes are prorated.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="security">
        <AccordionTrigger>Security</AccordionTrigger>
        <AccordionContent>
          Enforce single sign-on and two-factor authentication for everyone.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Multiple

Your name and photo are visible to everyone in the workspace.

Choose which activity sends you an email or a push notification.

'use client';

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/accordion/accordion';

export default function AccordionMultiple() {
  return (
    <Accordion
      type="multiple"
      defaultValue={['profile', 'notifications']}
      className="nx:max-w-md"
    >
      <AccordionItem value="profile">
        <AccordionTrigger>Profile</AccordionTrigger>
        <AccordionContent>
          Your name and photo are visible to everyone in the workspace.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="notifications">
        <AccordionTrigger>Notifications</AccordionTrigger>
        <AccordionContent>
          Choose which activity sends you an email or a push notification.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="privacy">
        <AccordionTrigger>Privacy</AccordionTrigger>
        <AccordionContent>
          Control who can see your status and when you were last active.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Disabled

'use client';

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/accordion/accordion';

export default function AccordionDisabled() {
  return (
    <Accordion type="single" collapsible className="nx:max-w-md">
      <AccordionItem value="plan">
        <AccordionTrigger>Current plan</AccordionTrigger>
        <AccordionContent>You are on the Team plan.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="enterprise" disabled>
        <AccordionTrigger>Enterprise features</AccordionTrigger>
        <AccordionContent>Available on the Enterprise plan.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}