Beta

UI

Accordion

A vertical stack of clickable headings that expand to show content.

Radix DocsAPI ReferenceGitHubStorybook

Installation

  1. 1

    Install dependencies:

    npm install @radix-ui/react-accordion @remixicon/react
  2. 2

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor Raw Badge [v0.0.0]
import React from "react"import * as AccordionPrimitives from "@radix-ui/react-accordion"import { RiAddLine } from "@remixicon/react"
import { cx } from "@/lib/utils"
const Accordion = AccordionPrimitives.Root
Accordion.displayName = "AccordionItem"
const AccordionTrigger = React.forwardRef<  React.ElementRef<typeof AccordionPrimitives.Trigger>,  React.ComponentPropsWithoutRef<typeof AccordionPrimitives.Trigger>>(({ className, children, ...props }, forwardedRef) => (  <AccordionPrimitives.Header className="flex">    <AccordionPrimitives.Trigger      className={cx(        // base        "group flex flex-1 cursor-pointer items-center justify-between py-3 text-left text-sm font-medium leading-none",        // text color        "text-gray-900 dark:text-gray-50",        // disabled        "data-[disabled]:cursor-default data-[disabled]:text-gray-400 dark:data-[disabled]:text-gray-600",        //focus        "focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500",        className,      )}      {...props}      ref={forwardedRef}    >      {children}      <RiAddLine        className={cx(          // base          "size-5 shrink-0 transition-transform duration-150 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:-rotate-45",          // text color          "text-gray-400 dark:text-gray-600",          // disabled          " group-data-[disabled]:text-gray-300 group-data-[disabled]:dark:text-gray-700",        )}        aria-hidden="true"        focusable="false"      />    </AccordionPrimitives.Trigger>  </AccordionPrimitives.Header>))
AccordionTrigger.displayName = "AccordionTrigger"
const AccordionContent = React.forwardRef<  React.ElementRef<typeof AccordionPrimitives.Content>,  React.ComponentPropsWithoutRef<typeof AccordionPrimitives.Content>>(({ className, children, ...props }, forwardedRef) => (  <AccordionPrimitives.Content    ref={forwardedRef}    className={cx(      "data-[state=closed]:animate-accordionClose data-[state=open]:animate-accordionOpen",    )}    {...props}  >    <div      className={cx(        // base        "overflow-hidden pb-4 text-sm",        // text color        "text-gray-700 dark:text-gray-200",        className,      )}    >      {children}    </div>  </AccordionPrimitives.Content>))
AccordionContent.displayName = "AccordionContent"
const AccordionItem = React.forwardRef<  React.ElementRef<typeof AccordionPrimitives.Item>,  React.ComponentPropsWithoutRef<typeof AccordionPrimitives.Item>>(({ className, ...props }, forwardedRef) => (  <AccordionPrimitives.Item    ref={forwardedRef}    className={cx(      // base      "overflow-hidden border-b first:mt-0",      // border color      "border-gray-200 dark:border-gray-800",      className,    )}    {...props}  />))
AccordionItem.displayName = "AccordionItem"
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }
  3. 3

    Update tailwind.config.ts

    import type { Config } from 'tailwindcss';export default {  // ...  theme: {    extend: {      keyframes: {        accordionOpen: {          from: { height: "0px" },          to: { height: "var(--radix-accordion-content-height)" },        },        accordionClose: {          from: {            height: "var(--radix-accordion-content-height)",          },          to: { height: "0px" },        },      },      animation: {        // Accordion        accordionOpen: "accordionOpen 150ms cubic-bezier(0.87, 0, 0.13, 1)",        accordionClose: "accordionClose 150ms cubic-bezier(0.87, 0, 0.13, 1)",      },    },  },  // ...} satisfies Config;

Example: Multiple items open at the same time

To open more than one item at a time, set the type prop to multiple.

Managing Your Booking Online

Example: Default open and disabled item

Use the defaultValue prop in <Accordion/> to define the open item by default.

Managing Your Booking Online

Simply navigate to the "My Trips" section on our website and input your booking reference and last name to view your itinerary details.

Example: Controlled accordion

API Reference: Accordion

This component uses the Radix UI API.

API Reference: AccordionTrigger

This component uses the Radix UI API.

API Reference: AccordionItem

This component uses the Radix UI API.

API Reference: AccordionContent

This component uses the Radix UI API.