Devie UI

<Accordion />

The Accordion component extends the Base UI Accordion with polished default styles and an additional Accordion.Content subcomponent for consistent content padding. We also replaced the default chevron icon with the Lucide icon for better visual consistency across the design system.

Installation

Here is the component implementation code that you can copy to your project:

import { Accordion as BaseAccordion } from "@base-ui-components/react/accordion";
import clsx from "clsx";
import { ChevronDown } from "lucide-react";
import type { ReactNode } from "react";
import styles from "./Accordion.module.scss";
 
function Root({ className, ...props }: BaseAccordion.Root.Props) {
  return (
    <BaseAccordion.Root className={clsx(styles.root, className)} {...props} />
  );
}
 
function Item({ className, ...props }: BaseAccordion.Item.Props) {
  return (
    <BaseAccordion.Item className={clsx(styles.item, className)} {...props} />
  );
}
 
function Header({ className, ...props }: BaseAccordion.Header.Props) {
  return (
    <BaseAccordion.Header
      className={clsx(styles.header, className)}
      {...props}
    />
  );
}
 
function Trigger({
  className,
  children,
  ...props
}: BaseAccordion.Trigger.Props) {
  return (
    <BaseAccordion.Trigger
      className={clsx(styles.trigger, className)}
      {...props}
    >
      {children}
      <ChevronDown className={styles.triggerIcon} />
    </BaseAccordion.Trigger>
  );
}
 
function Panel({ className, ...props }: BaseAccordion.Panel.Props) {
  return (
    <BaseAccordion.Panel className={clsx(styles.panel, className)} {...props} />
  );
}
 
interface ContentProps {
  className?: string;
  children?: ReactNode;
}
 
function Content({ className, children }: ContentProps) {
  return <div className={clsx(styles.content, className)}>{children}</div>;
}
 
const Accordion = {
  Root,
  Item,
  Header,
  Trigger,
  Panel,
  Content,
};
 
export default Accordion;

Use Cases

Simple accordion

A basic accordion with expandable sections. By default, only one section can be open at a time.

Allow multiple sections open

Use the openMultiple prop to allow multiple accordion items to be expanded simultaneously.

Disabled accordion items

Individual accordion items can be disabled using the disabled prop on the Accordion.Item component. Disabled items cannot be expanded or collapsed.