Accordion

A vertically stacked set of interactive headings that each reveal a section of content. Built on top of Radix Accordion

Preview

Is it accessible?

Is it styled?

Yes. It comes with default styles that matches the other components' aesthetic.

Is it animated?

Code

import Accordion from '@dinui/react/accordion'

export default function AccordionVariantDemo() {
  return (
    <Accordion type="single" collapsible className="w-full" defaultValue="item-2">
      <Accordion.Item value="item-1">
        <Accordion.Item.Trigger>Is it accessible?</Accordion.Item.Trigger>
        <Accordion.Item.Content>
          Yes. It adheres to the WAI-ARIA design pattern.
        </Accordion.Item.Content>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.Item.Trigger>Is it styled?</Accordion.Item.Trigger>
        <Accordion.Item.Content>
          Yes. It comes with default styles that matches the other components&apos; aesthetic.
        </Accordion.Item.Content>
      </Accordion.Item>

      <Accordion.Item value="item-3">
        <Accordion.Item.Trigger>Is it animated?</Accordion.Item.Trigger>
        <Accordion.Item.Content>
          Yes. It's animated by default, but you can disable it if you prefer.
        </Accordion.Item.Content>
      </Accordion.Item>
    </Accordion>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add accordion

   yarn

   yarn dlx @dinui/cli@latest add accordion

   pnpm

   pnpm dlx @dinui/cli@latest add accordion

   bun

   bunx @dinui/cli@latest add accordion

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-accordion @tabler/icons-react tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-accordion @tabler/icons-react tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-accordion @tabler/icons-react tailwind-variants type-fest

   bun

   bun add @radix-ui/react-accordion @tabler/icons-react tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import * as AccordionPrimitive from '@radix-ui/react-accordion'
   import { IconChevronDown } from '@tabler/icons-react'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const accordion = tv({
     slots: {
       item: 'border-b group',
       trigger: [
         'w-full flex items-center justify-between py-4 gap-3 transition-all hover:underline',
         'text-sm font-medium',
         '[&[data-state=open]>[data-el=icon]]:rotate-180',
       ],
       triggerIcon: 'transition size-4 shrink-0 text-fg-weaker group-hover:text-fg-weaker--hover',
       content: [
         'overflow-hidden text-sm text-fg-weak',
         'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
       ],
       contentWrapper: 'pb-4',
     },
   })
   
   const AccordionRoot = AccordionPrimitive.Root
   
   const AccordionItem = forwardRef<
     React.ElementRef<typeof AccordionPrimitive.Item>,
     React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
   >((props, ref) => {
     const { item } = accordion()
   
     return (
       <AccordionPrimitive.Item
         {...props}
         ref={ref}
         className={item({ className: props.className })}
       />
     )
   })
   AccordionItem.displayName = 'AccordionItem'
   
   const AccordionTrigger = forwardRef<
     React.ElementRef<typeof AccordionPrimitive.Trigger>,
     Merge<
       Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>, 'asChild'>,
       {
         headerProps?: React.ComponentProps<typeof AccordionPrimitive.Header>
         iconProps?: React.ComponentProps<typeof IconChevronDown>
       }
     >
   >(({ headerProps, iconProps, children, ...props }, ref) => {
     const { trigger, triggerIcon } = accordion()
   
     return (
       <AccordionPrimitive.Header {...headerProps}>
         <AccordionPrimitive.Trigger
           {...props}
           ref={ref}
           className={trigger({ className: props.className })}
         >
           {children}
   
           <IconChevronDown
             {...iconProps}
             data-el="icon"
             className={triggerIcon({ className: iconProps?.className })}
           />
         </AccordionPrimitive.Trigger>
       </AccordionPrimitive.Header>
     )
   })
   AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
   
   const AccordionContent = forwardRef<
     React.ElementRef<typeof AccordionPrimitive.Content>,
     Merge<
       React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>,
       {
         wrapperProps?: React.ComponentProps<'div'>
       }
     >
   >(({ wrapperProps, children, ...props }, ref) => {
     const { content, contentWrapper } = accordion()
   
     return (
       <AccordionPrimitive.Content
         {...props}
         ref={ref}
         className={content({ className: props.className })}
       >
         <div {...wrapperProps} className={contentWrapper({ className: wrapperProps?.className })}>
           {children}
         </div>
       </AccordionPrimitive.Content>
     )
   })
   AccordionContent.displayName = AccordionPrimitive.Content.displayName
   
   const Accordion = Object.assign(AccordionRoot, {
     Item: Object.assign(AccordionItem, {
       Trigger: AccordionTrigger,
       Content: AccordionContent,
     }),
   })
   
   export default Accordion
   export { accordion, AccordionPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.