Collapse

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Collapse — it needs no JavaScript, so the classes below are the whole story.

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

Root class details, with 3 modifiers:

• .details
• .details-content
• .details-ghost
• .details-title

React

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

npm i @wizeworks/silicaui-react

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

Props

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.

import { Collapse, CollapseTitle, CollapseContent } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

const FAQS = [
    { q: "Can I change plans later?", a: "Yes — upgrade or downgrade anytime from Settings." },
    { q: "Do you offer refunds?", a: "Full refund within 14 days, no questions asked." },
    { q: "Is there a free trial?", a: "14 days on every paid plan, no card required." },
];

export function CollapseDemo() {
    return (
        <>
            <Section title="Real use · FAQ (exclusive — one open at a time)">
                <div className="flex max-w-md flex-col gap-2">
                    {FAQS.map((f, i) => (
                        <Collapse key={f.q} name="faq" open={i === 0}>
                            <CollapseTitle>{f.q}</CollapseTitle>
                            <CollapseContent>{f.a}</CollapseContent>
                        </Collapse>
                    ))}
                </div>
            </Section>

            <Section title="Ghost (borderless)">
                <Collapse ghost className="max-w-md">
                    <CollapseTitle>Shipping details</CollapseTitle>
                    <CollapseContent>Ships in 2–3 business days.</CollapseContent>
                </Collapse>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Collapse — a native <details> disclosure (works with zero JS on publish). Not a container: its body is props.content (text). 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("Collapse", "details", { /* props */ });
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 "details details-primary" rather than passing a colour as a prop.

Takes children

no

Hydrated by

nothing — this one is static markup