RadCN
Compositereadycomponentready

Collapsible

A native details/summary disclosure primitive for single-panel reveal patterns with app-owned trigger presentation.

Importimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'radcn/collapsible'
Preview

Live package example

Render the upstream @peduarte repository disclosure with default closed state, icon-only Toggle trigger, and exact repository rows.

Collapsible Demo

Render the upstream @peduarte repository disclosure with default closed state, icon-only Toggle trigger, and exact repository rows.

Preview
Toggle
@radix-ui/colors
@stitches/react

React useState(false), open, and onOpenChange map to native details/summary open state for this example; apps can add browser enhancement if they need synchronized state outside the disclosure.

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'radcn/collapsible'

function RepositoryRow({ ariaHidden, children }: { ariaHidden?: boolean; children: string }) {
  return (
    <div
      aria-hidden={ariaHidden ? 'true' : undefined}
      class="rounded-md border px-4 py-2 font-mono text-sm"
    >
      {children}
    </div>
  )
}

export function CollapsibleDemo() {
  return (
    <Collapsible class="flex w-[350px] flex-col gap-2">
      <CollapsibleTrigger class="flex w-[350px] flex-col gap-2">
        <span class="flex items-center justify-between gap-4 px-4">
          <h4 aria-hidden="true" class="text-sm font-semibold">
            @peduarte starred 3 repositories
          </h4>
          <span class="radcn-button radcn-button--ghost radcn-button--icon size-8">
            <span class="sr-only">Toggle</span>
            <span aria-hidden="true">⇵</span>
          </span>
        </span>
        <RepositoryRow ariaHidden>@radix-ui/primitives</RepositoryRow>
      </CollapsibleTrigger>
      <CollapsibleContent class="flex flex-col gap-2">
        <RepositoryRow>@radix-ui/colors</RepositoryRow>
        <RepositoryRow>@stitches/react</RepositoryRow>
      </CollapsibleContent>
    </Collapsible>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'radcn/collapsible'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Collapsible renders native details and summary markup, so disclosure state, keyboard toggling, and content association stay browser-owned.
  • The icon-only trigger preserves the upstream screen-reader text Toggle inside the summary while the app-owned chevrons icon is aria-hidden.
  • The default demo starts closed, leaving @radix-ui/primitives visible and @radix-ui/colors plus @stitches/react hidden until the user toggles the summary.
  • Public data-radcn-collapsible, data-radcn-collapsible-trigger, and data-radcn-collapsible-content hooks are present for tests and app-owned styling.

Customization

  • Root width/flex/gap maps from flex w-[350px] flex-col gap-2 to class, style, and package tokens on the Collapsible root.
  • Header layout maps from flex items-center justify-between gap-4 px-4 to app-owned wrapper class/style around the trigger.
  • Rounded bordered monospace repository rows map from rounded-md border px-4 py-2 font-mono text-sm to ordinary app markup composed inside Collapsible.
  • Button ghost and size="icon" composition maps to explicit radcn-button, radcn-button--ghost, radcn-button--icon, and size-8 classes on the app-owned icon presentation inside CollapsibleTrigger.
  • Custom tokens remain available through Collapsible CSS variables and public content/trigger hooks.

Remix 3 Notes

  • React client component markers and Radix Collapsible map to dependency-free native details/summary markup plus package hooks.
  • React useState(false), open, and onOpenChange map to native details[open] state for this example; synchronized external state can be app-owned enhancement.
  • data-slot maps to public data-radcn-collapsible* hooks, className maps to class, and cn maps to explicit class composition.
  • Tailwind width, flex, gap, spacing, border, rounded, and font utilities map to class, style, CSS variables, and app CSS over public hooks.
  • CollapsibleTrigger asChild and Button composition map to styling the summary trigger directly; RadCN does not need a Slot dependency for this example.
  • lucide ChevronsUpDown maps to app-owned decorative chevrons icon markup instead of lucide-react.
  • Vendor source remains read-only evidence and is not imported by RadCN.