Completeness: behavior-required

The stylesheet is only the visible half of this component. It also needs a keyboard map, focus managed across more than one element, ARIA attributes that point at other nodes, and [data-*] attributes that only running code sets — so a CSS-only port will not reproduce it. Use @blakeui/react, or read the interaction contract from the MCP server with get_component_behavior("Accordion") and build the behaviour yourself.

Import

import { Accordion } from '@blakeui/react';

Usage

import {Accordion} from "@blakeui/react";
import {
  ArrowsRotateLeft,
  Box,
  ChevronDown,

Anatomy

Import the Accordion component and access all parts using dot notation.

import { Accordion } from '@blakeui/react';

export default () => (
  <Accordion>
    <Accordion.Item>
      <Accordion.Heading>
        <Accordion.Trigger>
          <Accordion.Indicator />
        </Accordion.Trigger>
      </Accordion.Heading>
      <Accordion.Panel>
        <Accordion.Body/>
      </Accordion.Panel>
    </Accordion.Item>
  </Accordion>
)

Surface

import {Accordion} from "@blakeui/react";
import {
  ArrowsRotateLeft,
  Box,
  ChevronDown,

Multiple Expanded

import {Accordion} from "@blakeui/react";

export function Multiple() {
  return (
    <Accordion allowsMultipleExpanded className="w-full max-w-md">

Controlled

Expanded: getting-started

Learn the basics of blakeUI and how to integrate it into your React project. This section covers installation, setup, and your first component.

"use client";

import {Accordion, Button, useDisclosureGroupNavigation} from "@blakeui/react";
import {ChevronDown, ChevronUp} from "@gravity-ui/icons";
import React from "react";

Custom Indicator

"use client";

import type {Key} from "@blakeui/react";

import {Accordion} from "@blakeui/react";

Disabled State

Entire accordion disabled

Individual items disabled

import {Accordion} from "@blakeui/react";

export function Disabled() {
  return (
    <div className="flex w-full flex-col items-center gap-8">

FAQ Layout

Frequently Asked Questions

Everything you need to know about licensing and usage.

General

Licensing

Support

import {Accordion} from "@blakeui/react";
import {ChevronDown} from "@gravity-ui/icons";

export function FAQ() {
  const categories = [

Custom Styles

import {Accordion, cn} from "@blakeui/react";
import {ChevronDown} from "@gravity-ui/icons";

const items = [
  {

Without Separator

import {Accordion} from "@blakeui/react";
import {ChevronDown, CreditCard, Receipt, ShoppingBag} from "@gravity-ui/icons";

const items = [
  {

Custom Render Function

How do I place an order?

Can I modify or cancel my order?

What payment methods do you accept?

How much does shipping cost?

Do you ship internationally?

How do I request a refund?

"use client";

import {Accordion} from "@blakeui/react";
import {
  ArrowsRotateLeft,

Styling

Passing Tailwind CSS classes

"use client";

import { Accordion, cn } from "@blakeui/react";
import {Icon} from "@iconify/react";

Customizing the component classes

To customize the Accordion component classes, you can use the @layer components directive.
Learn more.

A worked example is in Styling.

blakeUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Accordion component uses these CSS classes (View source styles):

Base Classes

.accordion - Base accordion container
.accordion__body - Content body container
.accordion__heading - Heading wrapper
.accordion__indicator - Expand/collapse indicator icon
.accordion__item - Individual accordion item
.accordion__panel - Collapsible panel container
.accordion__trigger - Clickable trigger button

Variant Classes

.accordion--outline - Outline variant with border and background

State Classes

.accordion__trigger[aria-expanded="true"] - Expanded state
.accordion__panel[aria-hidden="false"] - Panel visible state

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

Hover: :hover or [data-hovered="true"] on trigger
Focus: :focus-visible or [data-focus-visible="true"] on trigger
Disabled: :disabled or [aria-disabled="true"] on trigger
Expanded: [aria-expanded="true"] on trigger

API Reference

Accordion Props

Prop	Type	Default	Description
`allowsMultipleExpanded`	`boolean`	`false`	Whether multiple items can be expanded at once
`defaultExpandedKeys`	`Iterable<Key>`	-	The initial expanded keys
`expandedKeys`	`Iterable<Key>`	-	The controlled expanded keys
`onExpandedChange`	`(keys: Set<Key>) => void`	-	Handler called when expanded keys change
`isDisabled`	`boolean`	`false`	Whether the entire accordion is disabled
`variant`	`"default" \| "surface"`	`"default"`	The visual variant of the accordion
`hideSeparator`	`boolean`	`false`	Hide separator lines between accordion items
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The accordion items
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionRenderProps>`	-	Overrides the default DOM element with a custom render function.

Accordion.Item Props

Prop	Type	Default	Description
`id`	`Key`	-	Unique identifier for the item
`isDisabled`	`boolean`	`false`	Whether this item is disabled
`defaultExpanded`	`boolean`	`false`	Whether item is initially expanded
`isExpanded`	`boolean`	-	Controlled expanded state
`onExpandedChange`	`(isExpanded: boolean) => void`	-	Handler for expanded state changes
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The item content
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionItemRenderProps>`	-	Overrides the default DOM element with a custom render function.

Accordion.Trigger Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode \| RenderFunction`	-	Trigger content or render function
`onPress`	`() => void`	-	Additional press handler
`isDisabled`	`boolean`	-	Whether trigger is disabled
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TriggerRenderProps>`	-	Overrides the default DOM element with a custom render function.

Accordion.Panel Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Panel content
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionPanelRenderProps>`	-	Overrides the default DOM element with a custom render function.

Accordion.Indicator Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Custom indicator icon

Accordion.Body Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Body content

Accordion

How do I place an order?

Can I modify or cancel my order?

What payment methods do you accept?

How much does shipping cost?

Do you ship internationally?

How do I request a refund?

How do I place an order?

Can I modify or cancel my order?

What payment methods do you accept?

How much does shipping cost?

Do you ship internationally?

How do I request a refund?

Getting Started

Core Concepts

Advanced Usage

Best Practices

Getting Started

Core Concepts

Advanced Usage

Using Plus/Minus Icon

Using Caret Icon

Using Arrow Icon

Entire accordion disabled

Disabled Item 1

Disabled Item 2

Individual items disabled

Active Item

Disabled Item

Another Active Item

Frequently Asked Questions

How do I place an order?

Can I modify or cancel my order?

How do I purchase a license?

What is the difference between a standard and a pro license?

How do I get support?

Set Up NotificationsReceive account activity updates

Set up Browser ExtensionConnect you browser to your account

Mint CollectibleCreate your first collectible

How do I place an order?

Can I modify or cancel my order?

What payment methods do you accept?

On this page