Accordion

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

Yes. It adheres to the WAI-ARIA design pattern.

1
import {
2
  Accordion,
3
  AccordionContent,
4
  AccordionItem,
5
  AccordionTrigger,
6
} from "@/components/ui/pxl/accordion";
7

8
export default function AccordionDemo() {
9
  return (
10
    <Accordion className="w-full max-w-md" defaultValue={["item-1"]}>
11
      <AccordionItem value="item-1">
12
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
13
        <AccordionContent>
14
          Yes. It adheres to the WAI-ARIA design pattern.
15
        </AccordionContent>
16
      </AccordionItem>
17
      <AccordionItem value="item-2">
18
        <AccordionTrigger>Is it styled?</AccordionTrigger>
19
        <AccordionContent>
20
          Yes. It comes with default styles that match the 8bit aesthetic.
21
        </AccordionContent>
22
      </AccordionItem>
23
      <AccordionItem value="item-3">
24
        <AccordionTrigger>Is it animated?</AccordionTrigger>
25
        <AccordionContent>
26
          Yes. Panels animate open and closed by default.
27
        </AccordionContent>
28
      </AccordionItem>
29
    </Accordion>
30
  );
31
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/accordion

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
2
import { cva, type VariantProps } from "class-variance-authority";
3

4
import { cn } from "@/lib/utils";
5

6
import { Separator } from "./separator";
7

8
function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
9
  return (
10
    <AccordionPrimitive.Root
11
      data-slot="accordion"
12
      className={cn("flex w-full flex-col", className)}
13
      {...props}
14
    />
15
  );
16
}
17

18
function AccordionItem({
19
  children,
20
  className,
21
  ...props
22
}: AccordionPrimitive.Item.Props) {
23
  return (
24
    <AccordionPrimitive.Item
25
      data-slot="accordion-item"
26
      className={cn(className)}
27
      {...props}
28
    >
29
      {children}
30
      <Separator data-slot="accordion-separator" border="dashed" />
31
    </AccordionPrimitive.Item>
32
  );
33
}
34

35
const accordionTriggerVariants = cva(
36
  "group/accordion-trigger relative flex flex-1 items-start justify-between pixel-rounded pixel-size-[5px] px-ring pixel-color-background py-2.5 text-left text-sm outline-none hover:pixel-color-secondary hover:text-secondary-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:[--px-ring-color:transparent] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground hover:**:data-[slot=accordion-trigger-icon]:text-secondary-foreground",
37
  {
38
    variants: {
39
      font: {
40
        heading: "font-heading",
41
        sans: "font-sans",
42
        mono: "font-mono",
43
      },
44
    },
45
    defaultVariants: {
46
      font: "heading",
47
    },
48
  },
49
);
50

51
function AccordionTrigger({
52
  className,
53
  children,
54
  font = "heading",
55
  ...props
56
}: AccordionPrimitive.Trigger.Props &
57
  VariantProps<typeof accordionTriggerVariants>) {
58
  return (
59
    <AccordionPrimitive.Header className="flex">
60
      <AccordionPrimitive.Trigger
61
        data-slot="accordion-trigger"
62
        className={cn(accordionTriggerVariants({ font }), className)}
63
        {...props}
64
      >
65
        {children}
66
        <svg
67
          xmlns="http://www.w3.org/2000/svg"
68
          fill="currentColor"
69
          viewBox="0 0 24 24"
70
          data-slot="accordion-trigger-icon"
71
          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
72
        >
73
          <path d="M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z" />
74
        </svg>
75
        <svg
76
          xmlns="http://www.w3.org/2000/svg"
77
          fill="currentColor"
78
          viewBox="0 0 24 24"
79
          data-slot="accordion-trigger-icon"
80
          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
81
        >
82
          <path d="M13 8h-2v2h2V8Zm-2 2H9v2h2v-2Zm4 0h-2v2h2v-2Zm-6 2H7v2h2v-2Zm8 0h-2v2h2v-2ZM7 14H5v2h2v-2Zm12 0h-2v2h2v-2Z" />
83
        </svg>
84
      </AccordionPrimitive.Trigger>
85
    </AccordionPrimitive.Header>
86
  );
87
}
88

89
function AccordionContent({
90
  className,
91
  children,
92
  ...props
93
}: AccordionPrimitive.Panel.Props) {
94
  return (
95
    <AccordionPrimitive.Panel
96
      data-slot="accordion-content"
97
      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
98
      {...props}
99
    >
100
      <div
101
        className={cn(
102
          "h-(--accordion-panel-height) pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
103
          className,
104
        )}
105
      >
106
        {children}
107
      </div>
108
    </AccordionPrimitive.Panel>
109
  );
110
}
111

112
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

Update the import paths to match your project setup.

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/pxl/accordion"

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Composition

Use the following composition to build an Accordion:

Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

Multiple

Use the multiple prop to allow multiple items to be open at the same time.

Yes. Pass the multiple prop to allow more than one item open at once.

Each item tracks its own open state independently.

1
import {
2
  Accordion,
3
  AccordionContent,
4
  AccordionItem,
5
  AccordionTrigger,
6
} from "@/components/ui/pxl/accordion";
7

8
export default function AccordionMultipleDemo() {
9
  return (
10
    <Accordion
11
      className="w-full max-w-md"
12
      defaultValue={["item-1", "item-2"]}
13
      multiple
14
    >
15
      <AccordionItem value="item-1">
16
        <AccordionTrigger>Can multiple items be open?</AccordionTrigger>
17
        <AccordionContent>
18
          Yes. Pass the multiple prop to allow more than one item open at once.
19
        </AccordionContent>
20
      </AccordionItem>
21
      <AccordionItem value="item-2">
22
        <AccordionTrigger>Does state persist?</AccordionTrigger>
23
        <AccordionContent>
24
          Each item tracks its own open state independently.
25
        </AccordionContent>
26
      </AccordionItem>
27
    </Accordion>
28
  );
29
}

Disabled

Use the disabled prop on AccordionItem to disable individual items.

1
import {
2
  Accordion,
3
  AccordionContent,
4
  AccordionItem,
5
  AccordionTrigger,
6
} from "@/components/ui/pxl/accordion"
7

8
export default function AccordionDisabled() {
9
  return (
10
    <Accordion className="w-full">
11
      <AccordionItem value="item-1">
12
        <AccordionTrigger>Can I access my account history?</AccordionTrigger>
13
        <AccordionContent>
14
          Yes, you can view your complete account history including all
15
          transactions, plan changes, and support tickets in the Account History
16
          section of your dashboard.
17
        </AccordionContent>
18
      </AccordionItem>
19
      <AccordionItem value="item-2" disabled>
20
        <AccordionTrigger>Premium feature information</AccordionTrigger>
21
        <AccordionContent>
22
          This section contains information about premium features. Upgrade your
23
          plan to access this content.
24
        </AccordionContent>
25
      </AccordionItem>
26
      <AccordionItem value="item-3">
27
        <AccordionTrigger>How do I update my email address?</AccordionTrigger>
28
        <AccordionContent>
29
          You can update your email address in your account settings.
30
          You&apos;ll receive a verification email at your new address to
31
          confirm the change.
32
        </AccordionContent>
33
      </AccordionItem>
34
    </Accordion>
35
  )
36
}

API Reference

See the Base UI documentation for more information.