Disclosure

Name: Rad UI
Author: Rad UI Team

A multi-item show/hide component. Use the convenience wrapper with an items array, or compose manually with Root, Item, Trigger, and Content.

React
"use client"

import Disclosure from "@radui/ui/Disclosure"

const items = [
    { title: "What is Rad UI?", content: "Rad UI is a headless component library for React. Build your own design system on top of accessible, unstyled primitives." },
    { title: "Is it accessible?", content: "Yes. All components follow WAI-ARIA patterns and support full keyboard navigation." },
    { title: "Can I use it with Tailwind?", content: "Absolutely. Since components are headless, you can style them with any CSS approach including Tailwind." }
]

const DisclosureExample = () => {
    return (
        <div className="w-[360px]">
            <Disclosure items={items} />
        </div>
    )
}

export default DisclosureExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Disclosure from "@radui/ui/Disclosure"

export default () => {
    return (
        <Disclosure.Root>
            <Disclosure.Item value={0}>
                <Disclosure.Trigger />
                <Disclosure.Content />
            </Disclosure.Item>
        </Disclosure.Root>
    )
}

Root

The root Disclosure container.

Prop	Type	Default
items	{ title: string, content: ReactNode }[]	--
className	string	""