Collapsible

Name: Rad UI
Author: Rad UI Team

A simple show/hide component with a trigger and content area. Useful for secondary information that doesn't need to be always visible.

React
"use client"

import Collapsible from "@radui/ui/Collapsible"

const CollapsibleExample = () => {
    return (
        <div className="flex flex-col gap-4 w-[320px]">
            <Collapsible.Root>
                <Collapsible.Trigger className="w-full flex justify-between items-center px-4 py-2 rounded-lg border font-medium cursor-pointer">
                    What is Rad UI?
                    <span>▾</span>
                </Collapsible.Trigger>
                <Collapsible.Content className="px-4 py-2 text-gray-700">
                    Rad UI is a headless component library for React. Build your own design system on top of accessible, unstyled primitives.
                </Collapsible.Content>
            </Collapsible.Root>
            <Collapsible.Root>
                <Collapsible.Trigger className="w-full flex justify-between items-center px-4 py-2 rounded-lg border font-medium cursor-pointer">
                    Is it accessible?
                    <span>▾</span>
                </Collapsible.Trigger>
                <Collapsible.Content className="px-4 py-2 text-gray-700">
                    Yes. All components follow WAI-ARIA patterns and support full keyboard navigation.
                </Collapsible.Content>
            </Collapsible.Root>
        </div>
    )
}

export default CollapsibleExample

API Documentation

Anatomy

Import all parts of the component and piece them together

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

export default () => {
    return (
        <Collapsible.Root>
            <Collapsible.Trigger />
            <Collapsible.Content />
        </Collapsible.Root>
    )
}

Root

The root collapsible container.

Prop	Type	Default
open	boolean	false
defaultOpen	boolean	false
disabled	boolean	false
transitionDuration	number	0
onOpenChange	function	--
customRootClass	string	""

Trigger

The button that toggles the collapsible open/closed.

Prop	Type	Default
asChild	boolean	false
className	string	""

Content

The content that is shown or hidden.

Prop	Type	Default
className	string	""