Skip to main content

​
Quick Start

This guide will get you from installation to a working accordion component in under 2 minutes.

​
Installation

Install Monochrome with your preferred package manager: 
npm install monochrome

​
Import the core

Import the Monochrome core once in your app’s entry point (e.g., main.tsx, App.tsx, or main.ts): 
import "monochrome"
The core auto-activates and handles all component interactions through event delegation. You only need to import it once — all components on the page will work automatically.

​
Build your first component

Let’s build a FAQ accordion with collapsible sections. 
import "monochrome"
import { Accordion } from "monochrome/react"

export function FAQ() {
  return (
    <Accordion.Root type="single">
      <Accordion.Item open>
        <Accordion.Header as="h3">
          <Accordion.Trigger>
            What is Monochrome?
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel>
          <p>A tiny, accessible UI component library.</p>
        </Accordion.Panel>
      </Accordion.Item>
      
      <Accordion.Item>
        <Accordion.Header as="h3">
          <Accordion.Trigger>
            How does it work?
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel>
          <p>
            Monochrome uses the DOM as its source of truth. It reads ARIA
            attributes, responds to user interactions, and updates them
            directly through event delegation.
          </p>
        </Accordion.Panel>
      </Accordion.Item>
      
      <Accordion.Item>
        <Accordion.Header as="h3">
          <Accordion.Trigger>
            Is it accessible?
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel>
          <p>
            Yes! Every component follows WAI-ARIA Authoring Practices and
            targets WCAG 2.2 AA. Full keyboard navigation, screen reader
            support, and automatic ARIA attribute management.
          </p>
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  )
}

​
Understanding the API

The accordion is composed of four sub-components:
1

Accordion.Root

The container element with type prop:
  • type="single" — only one panel can be open at a time
  • type="multiple" — any combination of panels can be open
2

Accordion.Item

Each collapsible section. Supports two props:
  • open — start in the open state (React: open, Vue: :open="true")
  • disabled — cannot be toggled, skipped by keyboard navigation
3

Accordion.Header

Semantic heading wrapper. Use the as prop to set the heading level (h1 through h6). Defaults to h3.
4

Accordion.Trigger

The button that toggles the panel. Automatically gets proper ARIA attributes (aria-expanded, aria-controls).
5

Accordion.Panel

The collapsible content region. Automatically hidden when closed and visible when open.

​
Props reference

ComponentPropTypeDefaultDescription
Roottype"single" | "multiple""single"Whether one or many panels can be open
ItemopenbooleanfalseStart open
ItemdisabledbooleanfalseCannot toggle, skipped by keyboard
Headeras"h1" – "h6""h3"Heading level
Vue note: Boolean props require : binding in templates: :open="true", :disabled="true"

​
Keyboard navigation

Monochrome includes full keyboard support out of the box:
KeyAction
ArrowDown / ArrowUpNavigate between accordion items
Home / EndJump to first or last item
Enter / SpaceToggle the focused item
Disabled items are automatically skipped during keyboard navigation.

​
Add styling

Monochrome is headless — no CSS is shipped. You have complete control over styling. Here’s a minimal example to get you started: 
/* Style the accordion items */
[data-mode] > div {
  border-bottom: 1px solid #e5e7eb;
}

/* Style the trigger buttons */
[id^="mct:accordion:"] {
  width: 100%;
  padding: 1rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
}

[id^="mct:accordion:"]:hover {
  background: #f9fafb;
}

/* Style the panel content */
[role="region"] {
  padding: 1rem;
  color: #6b7280;
}

/* Add a rotation animation to indicate open state */
[id^="mct:accordion:"]::after {
  content: "▼";
  float: right;
  transition: transform 0.2s;
}

[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
Monochrome uses specific ID prefixes (mct:accordion:, mcc:accordion:) to identify components. You can target these with CSS attribute selectors.

​
Next steps

Components

Explore Collapsible, Menu, and Tabs components

Accessibility

Learn about keyboard navigation and ARIA attributes

Styling Guide

Advanced styling patterns and examples

API Reference

Complete API documentation for all components

Build docs developers (and LLMs) love

Get started for freeTalk to us