Accordion

Collapsible sections (Base UI behavior, animated height).

Real use · FAQ (single-open)

A component library and design system built on one CSS-first token model.

Multiple open at once

Both of these can be open together.

Set the `multiple` prop to allow it.

Using Accordion

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so Accordion is styled but inert: its behavior comes from disclosure. For that behavior with no framework, use the node-tree path below.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class accordion, with 5 modifiers:

.accordion
.accordion-content
.accordion-header
.accordion-item
.accordion-panel
.accordion-trigger

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Accordion } from "@wizeworks/silicaui-react";

Props

Prop	Type	Required	Description
chevron	boolean	no	Set false to omit the built-in chevron.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import {
    Accordion,
    AccordionItem,
    AccordionTrigger,
    AccordionPanel,
} from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

export function AccordionDemo() {
    return (
        <>
            <Section title="Real use · FAQ (single-open)">
                <Accordion defaultValue={["a"]} className="max-w-md">
                    <AccordionItem value="a">
                        <AccordionTrigger>What is Silica?</AccordionTrigger>
                        <AccordionPanel>
                            A component library and design system built on one CSS-first
                            token model.
                        </AccordionPanel>
                    </AccordionItem>
                    <AccordionItem value="b">
                        <AccordionTrigger>Is it themeable?</AccordionTrigger>
                        <AccordionPanel>
                            Yes — every color, radius, and size is a CSS variable you can
                            override per theme.
                        </AccordionPanel>
                    </AccordionItem>
                    <AccordionItem value="c">
                        <AccordionTrigger>Does it work with any framework?</AccordionTrigger>
                        <AccordionPanel>
                            The core is a Tailwind plugin; React components are a thin
                            typed layer on top.
                        </AccordionPanel>
                    </AccordionItem>
                </Accordion>
            </Section>

            <Section title="Multiple open at once">
                <Accordion multiple defaultValue={["a", "b"]} className="max-w-md">
                    <AccordionItem value="a">
                        <AccordionTrigger>Section one</AccordionTrigger>
                        <AccordionPanel>Both of these can be open together.</AccordionPanel>
                    </AccordionItem>
                    <AccordionItem value="b">
                        <AccordionTrigger>Section two</AccordionTrigger>
                        <AccordionPanel>Set the `multiple` prop to allow it.</AccordionPanel>
                    </AccordionItem>
                </Accordion>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Accordion — disclosure with params.single; AccordionItem is a plain wrapper div (no part), Trigger/Panel carry the trigger/panel roles. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Accordion", "accordion", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "accordion accordion-primary" rather than passing a colour as a prop.

Takes children: yes
Hydrated by: disclosure

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.

The full API for Accordion, on every path, is available through the Silica MCP server.