Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Preview

Code

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@ignix-ui/accordion';

<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent variant="fade">
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent variant="fade">
      Yes. It comes with default styles that matches the other
      components' aesthetics.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent variant="fade">
      Yes! It's animated by default, but you can disable it if you
      prefer.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Installation

CLI

ignix add component accordion

Manual

'use client';

import * as React from 'react';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import { ChevronDown } from 'lucide-react';
import { motion } from 'framer-motion';
import { cn } from '../../../utils/cn';

const animations = {
fade: {
hidden: { opacity: 0 },
visible: { opacity: 1, transition: { duration: 1 } },
},
slideDown: {
hidden: { y: -10, opacity: 0 },
visible: { y: 0, opacity: 1, transition: { duration: 1 } },
},
slideUp: {
hidden: { y: 10, opacity: 0 },
visible: { y: 0, opacity: 1, transition: { duration: 1 } },
},
scaleIn: {
hidden: { scale: 0.8, opacity: 0 },
visible: { scale: 1, opacity: 1, transition: { duration: 1 } },
},
rotate: {
hidden: { rotateX: 90, opacity: 0 },
visible: { rotateX: 0, opacity: 1, transition: { duration: 1 } },
},
bounce: {
hidden: { scale: 0.8, opacity: 0 },
visible: {
  scale: 1,
  opacity: 1,
  transition: { type: 'spring', stiffness: 300 },
},
},
flip: {
hidden: { rotateY: 90, opacity: 0 },
visible: { rotateY: 0, opacity: 1, transition: { duration: 1 } },
},
zoomIn: {
hidden: { scale: 0.5, opacity: 0 },
visible: { scale: 1, opacity: 1, transition: { duration: 1 } },
},
elastic: {
hidden: { scale: 0.5, opacity: 0 },
visible: {
  scale: 1,
  opacity: 1,
  transition: { type: 'spring', stiffness: 100, damping: 10 },
},
},
springy: {
hidden: { y: -20, opacity: 0 },
visible: {
  y: 0,
  opacity: 1,
  transition: { type: 'spring', stiffness: 200 },
},
},
};

type AnimationVariants = keyof typeof animations;

const getAnimationVariant = (variant: AnimationVariants) => {
return animations[variant] || animations.fade;
};
const Accordion = AccordionPrimitive.Root;

const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn('border-b AccordionItem', className)}
{...props}
/>
));
AccordionItem.displayName = 'AccordionItem';

const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex AccordionHeader">
<AccordionPrimitive.Trigger
  ref={ref}
  className={cn(
    'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 AccordionTrigger',
    className
  )}
  {...props}
>
  {children}
  <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 AccordionChevron" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;

interface AccordionContentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
variant?: AnimationVariants;
}

const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
AccordionContentProps
>(({ className, children, variant = 'fade', ...props }, ref) => {
const animationVariant = getAnimationVariant(variant);
return (
<AccordionPrimitive.Content
  ref={ref}
  className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down AccordionContent"
  {...props}
>
  <div className={cn('pb-4 pt-0', className)}>
    {' '}
    <motion.div
      initial="hidden"
      animate="visible"
      exit="hidden"
      variants={animationVariant}
      className="AccordionContentText"
    >
      {children}
    </motion.div>
  </div>
</AccordionPrimitive.Content>
);
});

AccordionContent.displayName = AccordionPrimitive.Content.displayName;

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

Usage

Import the components:

import * as React from 'react';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@ignix-ui/accordion';

Basic Example

export function AccordionDemo() {
  return (
    <Accordion type="single" collapsible className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Props

Accordion

The root component that contains all the accordion items.

Prop	Type	Default	Description
type	"single" | "multiple"	-	Determines whether one or multiple items can be opened at the same time.
value	string | string[]	-	The controlled value of the item(s) to expand.
defaultValue	string | string[]	-	The value of the item(s) to expand by default when initially rendered.
onValueChange	(value: string | string[]) => void	-	Event handler called when the expanded state of an item changes.
collapsible	boolean	false	When type is "single", allows all items to be closed.
disabled	boolean	false	When true, prevents the user from interacting with the accordion and all its items.
dir	"ltr" | "rtl"	"ltr"	The reading direction of the accordion.
orientation	"vertical" | "horizontal"	"vertical"	The orientation of the accordion.

AccordionItem

Contains all the parts of a single accordion item.

Prop	Type	Default	Description
value	string	-	A unique value for the item.
disabled	boolean	false	When true, prevents the user from interacting with the item.
className	string	-	Additional CSS classes for the item.

AccordionTrigger

Toggles the collapsed state of an item.

Prop	Type	Default	Description
className	string	-	Additional CSS classes for the trigger.
children	React.ReactNode	-	The content of the trigger.

AccordionContent

Contains the content of an accordion item that is revealed when the item is expanded.

Prop	Type	Default	Description
variant	AnimationVariants	"fade"	The animation variant applied when the content is revealed.
className	string	-	Additional CSS classes for the content container.
children	React.ReactNode	-	The content to be displayed.