Is the ai2 Collapsible compatible with shadcn/ui?

Yes. It uses the same anatomy (Collapsible, CollapsibleTrigger, CollapsibleContent) and installs through the standard shadcn registry format, so it drops into any shadcn/ui project and existing snippets keep working.

What is the difference between Collapsible and Accordion?

A Collapsible is a single show/hide region with no shared group state. An Accordion manages a set of sections together, optionally opening one at a time. Use Collapsible for one toggle and Accordion for a group.

Why does the component have no variants or sizes?

Collapsible is unstyled by design so it composes into any layout. It ships with no chrome of its own, so you set every class on the wrapper, trigger and content yourself.

How do I animate the open and close transition?

The region does not animate by default. Each part exposes data-state="open" or "closed", so you can add a height or opacity transition in your own CSS keyed off that attribute.

How do I install the ai2 Collapsible?

Run npx shadcn add @ai2/collapsible with the ai2 registry configured in components.json. An MCP agent can run the same install for you, or you can copy the source from this page manually.

Can an AI agent install and use this component?

Yes. The registry item ships agent-readable metadata and a working example, and the page provides a copy prompt. Point the shadcn MCP server at the @ai2 registry and the agent can search, inspect and install it on its own.

Can I control whether the region is open?

Yes. The root forwards open, defaultOpen and onOpenChange, so you can leave the region self-managed with defaultOpen or drive it from React state to sync with other UI.

Can I customize the styling?

Fully, and you have to: the component is unstyled. The source file lands in your project, and each part exposes data-slot and data-state for targeted Tailwind or CSS overrides.

Collapsible

An unstyled single show/hide region on radix-ui, so it composes into any layout you build around it.

disclosure

A free styled version is available

3 environment variables

"use client"

import * as React from "react"
import { ChevronsUpDown } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export default function CollapsibleDemo() {
  const [open, setOpen] = React.useState(false)
  return (
    <Collapsible
      open={open}
      onOpenChange={setOpen}
      className="flex w-full max-w-sm flex-col gap-2"
    >
      <div className="flex items-center justify-between gap-4 rounded-lg border border-border px-4 py-2">
        <span className="text-sm font-medium">3 environment variables</span>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon-sm" aria-label="Toggle">
            <ChevronsUpDown />
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="flex flex-col gap-2">
        {["DATABASE_URL", "API_KEY", "SIGNING_SECRET"].map((name) => (
          <div
            key={name}
            className="rounded-lg border border-border px-4 py-2 font-mono text-sm text-muted-foreground"
          >
            {name}
          </div>
        ))}
      </CollapsibleContent>
    </Collapsible>
  )
}

Installation

Run the following command

npx shadcn@latest add @ai2/collapsible

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install radix-ui@^1.6.1

Add the cn util

lib/utils.ts

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

/* Adds a source-attribution ref param to a URL (the inspiration exports mark their
   outbound links with an ai2.design attribution). An invalid URL is returned as is.

   This file is SHOWN TO THE CONSUMER: the docs component pages render the source of
   `cn` in a code block, so a Turkish comment here would reach every one of those
   pages. Keep it English. */
export function withRef(url: string, ref = "ai2.design"): string {
  try {
    const u = new URL(url)
    u.searchParams.set("ref", ref)
    return u.toString()
  } catch {
    return url
  }
}

Copy the source code

components/ui/collapsible.tsx

"use client"

import type * as React from "react"
import { Collapsible as CollapsiblePrimitive } from "@/components/ui/primitives"

function Collapsible(
  props: React.ComponentProps<typeof CollapsiblePrimitive.Root>
) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger(
  props: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>
) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent(
  props: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>
) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }

Manual installs skip the @ai2/tokens theme - add the token CSS from the theming guide so any tokens you style the region with resolve.

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>
    The content revealed when the region is open.
  </CollapsibleContent>
</Collapsible>

The component ships unstyled - wrap CollapsibleTrigger around your own control and put your layout inside CollapsibleContent.

Examples

Basic

3 environment variables

The demo drives open / onOpenChange from React state and supplies every class itself, since the component adds no styling of its own.

Props

Every part also forwards its underlying radix props. The region is unstyled, so it has no variant, tone or size axis.

Prop	Type	Default	Description
`open`	`boolean`	`-`	Controlled open state of the region (on Collapsible). Pair with onOpenChange.
`defaultOpen`	`boolean`	`false`	Open state when the region is uncontrolled (on Collapsible).
`onOpenChange`	`(open: boolean) => void`	`-`	Called with the next open state when the region is toggled (on Collapsible).
`disabled`	`boolean`	`false`	Prevents the trigger from toggling the region (on Collapsible).
`asChild`	`boolean`	`false`	Merges props onto your own child element instead of rendering a button (on CollapsibleTrigger).

ai2 Collapsible: a single show and hide region for React

The ai2 Collapsible is a shadcn-compatible collapsible component for React, built on the radix-ui Collapsible primitive. It toggles one region of content open and closed from a trigger, and it ships intentionally unstyled so it composes into any layout you build around it, from a filter panel to a see-more block. You provide the wrapper, spacing and icon; the primitive handles the state, accessibility and data attributes.

Because it ships through the shadcn registry format, you install it with one CLI command, an MCP agent, or a copy-paste, and the source lands in your own project. You own the file; there is no runtime dependency on ai2 itself. The live example above is the exact component you get.

What is the ai2 Collapsible?

It is a three-part composition: Collapsible, CollapsibleTrigger and CollapsibleContent. The anatomy matches shadcn/ui exactly, so existing snippets, muscle memory and AI agents keep working without changes. The trigger forwards the radix asChild prop, so you can toggle the region from your own button or icon without an extra wrapper element.

Unlike Accordion, a Collapsible is a single region with no shared group state and no visual chrome of its own: there are no variants, tones or sizes to choose. Each part carries a data-slot and a data-state attribute of open or closed, so you decide the look entirely in your own Tailwind classes and drive any animation from those attributes.

Why use it

Accessible by construction: The radix-ui Collapsible primitive wires the trigger to the region with aria-expanded and aria-controls, and toggles it with keyboard and pointer, so screen readers announce the state.
Unstyled and composable: It ships with no chrome of its own, so it drops into any layout without fighting existing styles; you own every class on the wrapper, trigger and content.
Controlled or uncontrolled: Use defaultOpen for a self-managed region, or drive open and onOpenChange from React state when the toggle must sync with other UI.
State-driven styling: Every part exposes data-state="open" | "closed", so you can rotate a chevron or animate height purely from CSS without touching the component.
Agent-readable metadata: The registry item states that it is a single show/hide region and when to reach for Accordion instead, so an MCP agent installs the right primitive.

Features

shadcn registry install: One command adds the component, its dependencies and the @ai2/tokens theme to your project.
asChild trigger: CollapsibleTrigger forwards the radix asChild prop, so the toggle can be your own Button or icon button rather than a bare element.
Controlled state: The root forwards open, defaultOpen and onOpenChange, so the region can be self-managed or driven from your own React state.
Disabled state: Pass disabled to the root to lock the region open or closed, for example while a section is loading.
Data attributes for styling: Collapsible, its trigger and its content all expose data-slot and data-state, so you can restyle and animate the open and closed states from CSS alone.
Framework-agnostic source: The file imports only the radix Collapsible primitive, so the source you install has no ai2 or app-specific dependencies to carry along.

Production tips

Add your own animation: The region is unstyled and does not animate by default. Drive a height or opacity transition from the data-state attribute in your own CSS if you want motion.
Reach for Accordion for a set: A Collapsible is one independent region. When you have several sections that should behave as a group, or open one at a time, use Accordion instead.
Keep the trigger a real control: Use asChild on a focusable Button so keyboard users can toggle the region; a trigger on a plain div is not reachable for them.
Label an icon-only trigger: If the trigger is just a chevron, give it an aria-label like "Toggle" so assistive technology announces what it does.
Do not hide critical actions: Collapsed content is easy to miss, so keep anything a user must act on visible and reserve the region for secondary or supporting detail.

Works with the rest of ai2

A Collapsible pairs naturally with a ai2 Button as its trigger via asChild, and its content can hold any registry component, such as a stack of ai2 Badge chips or form fields.

When you need a set of grouped, mutually exclusive sections rather than a single region, reach for the ai2 Accordion, and for switching between peer views use ai2 Tabs. Everything shares one token source, so combinations stay visually consistent in both modes.