Accordion

Import

import { Accordion } from "@thenamespace/uikit";

Usage

import { Accordion } from "@thenamespace/uikit";
import {
  RefreshIcon,
  PackageIcon,
  ArrowDown01Icon,

Anatomy

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

import { Accordion } from "@thenamespace/uikit";

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 "@thenamespace/uikit";
import {
  RefreshIcon,
  PackageIcon,
  ArrowDown01Icon,

Multiple Expanded

import {Accordion} from "@thenamespace/uikit";

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

Controlled

Expanded: getting-started

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

"use client";

import React from "react";

import {

Custom Indicator

"use client";

import React from "react";

import type { Key } from "@thenamespace/uikit";

Disabled State

Entire accordion disabled

Individual items disabled

import {Accordion} from "@thenamespace/uikit";

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 "@thenamespace/uikit";
import { ArrowDown01Icon, HugeiconsIcon } from "@thenamespace/uikit/icons";

export function FAQ() {
  const categories = [

Custom Styles

import { Accordion, cn } from "@thenamespace/uikit";
import { ArrowDown01Icon, HugeiconsIcon } from "@thenamespace/uikit/icons";

const items = [
  {

Without Separator

import { Accordion } from "@thenamespace/uikit";
import {
  ArrowDown01Icon,
  CreditCardIcon,
  ReceiptDollarIcon,

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 "@thenamespace/uikit";
import {
  RefreshIcon,

Styling

Passing Tailwind CSS classes

"use client";

import { Accordion, cn } from "@thenamespace/uikit";
import { ArrowDown01Icon, HugeiconsIcon } from "@thenamespace/uikit/icons";

Customizing the component classes

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

Learn more.

@layer components {
  .accordion {
    @apply rounded-xl bg-gray-50;
  }

  .accordion__trigger {
    @apply font-semibold text-lg;
  }

  .accordion--outline {
    @apply shadow-lg border-2;
  }
}

Namespace UIKit 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:

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 your 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?