Glin UI
Radix UIBase UI
Primitive / Atombeta

Collapsible

Radix collapsible region with an animated trigger and content for show and hide sections.

Edit on GitHub
Order #104823 items, $148.00
  • Canvas tote bag x2$64.00
  • Ceramic mug$24.00
  • Shipping$12.00
  • Arrives Oct 12 to Oct 14

Installation

Install from
pnpm dlx @glinui/cli@latest add collapsible

Prefer the package?

Usage

Variants

Every vocabulary variant on the default tone. Omit variant to follow the ambient design style.

Content
Content
Content
Content
Content
Content
Content
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@glinui/ui"



export function CollapsibleVariantsDemo() {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <Collapsible variant="glinr" defaultOpen className="p-4"><CollapsibleTrigger className="text-sm font-medium">glinr</CollapsibleTrigger><CollapsibleContent className="mt-2 text-sm">Content</CollapsibleContent></Collapsible>
      <Collapsible variant="solid" defaultOpen className="p-4"><CollapsibleTrigger className="text-sm font-medium">solid</CollapsibleTrigger><CollapsibleContent className="mt-2 text-sm">Content</CollapsibleContent></Collapsible>
      <Collapsible variant="plain" defaultOpen className="p-4"><CollapsibleTrigger className="text-sm font-medium">plain</CollapsibleTrigger><CollapsibleContent className="mt-2 text-sm">Content</CollapsibleContent></Collapsible>
      <Collapsible variant="soft" defaultOpen className="p-4"><CollapsibleTrigger className="text-sm font-medium">soft</CollapsibleTrigger><CollapsibleContent className="mt-2 text-sm">Content</CollapsibleContent></Collapsible>
      <Collapsible variant="outline" defaultOpen className="p-4"><CollapsibleTrigger className="text-sm font-medium">outline</CollapsibleTrigger><CollapsibleContent className="mt-2 text-sm">Content</CollapsibleContent></Collapsible>
      <Collapsible variant="ghost" defaultOpen className="p-4"><CollapsibleTrigger className="text-sm font-medium">ghost</CollapsibleTrigger><CollapsibleContent className="mt-2 text-sm">Content</CollapsibleContent></Collapsible>
      <Collapsible variant="gradient" defaultOpen className="p-4"><CollapsibleTrigger className="text-sm font-medium">gradient</CollapsibleTrigger><CollapsibleContent className="mt-2 text-sm">Content</CollapsibleContent></Collapsible>
    </div>
  )
}

Show more

Reveal the rest of a list.

5 repositories starred

glinui/ui
import { useState } from "react"
import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@glinui/ui"



export function Demo() {
  const [open, setOpen] = useState(false)
  const repos = ["glinui/ui", "glinui/docs", "glinui/tokens", "glinui/cli", "glinui/motion"]
  return (
    <Collapsible open={open} onOpenChange={setOpen} variant="plain" className="w-full max-w-sm">
      <div className="flex items-center justify-between gap-3 px-4 py-3">
        <h4 className="text-sm font-semibold">{repos.length} repositories starred</h4>
        <CollapsibleTrigger asChild>
          <Button variant="outline" size="sm">{open ? "Show less" : "Show all"}</Button>
        </CollapsibleTrigger>
      </div>
      <div className="mx-4 mb-3 rounded-lg border border-[var(--line-soft)] px-3 py-2 font-mono text-sm">{repos[0]}</div>
      <CollapsibleContent className="flex flex-col gap-2 px-4 pb-4">
        {repos.slice(1).map((repo) => (
          <div key={repo} className="rounded-lg border border-[var(--line-soft)] px-3 py-2 font-mono text-sm">{repo}</div>
        ))}
      </CollapsibleContent>
    </Collapsible>
  )
}

Accessibility

  • Trigger is a native button wired to the content with aria-controls.
  • Hidden content is removed from the accessibility tree.
  • Visible violet focus ring on the trigger.

Keyboard Interactions

KeyAction
EnterToggle the content.
SpaceToggle the content.

ARIA Attributes

  • `aria-expanded` on the trigger
  • `aria-controls` links trigger to content
  • `data-state` open or closed

Reduced Motion

Content fades and slides 4px on open. With prefers-reduced-motion the animation is removed and content appears instantly.

Affected properties

opacitytransform

API Reference

Collapsible

PropTypeDefaultDescription
variant"glinr" | "solid" | "plain" | "soft" | "outline" | "ghost" | "gradient" | "glass"ambient (glinr)Surface variant. Omit to follow the ambient design style (glinr by default, plain for minimal, glass for glass).
tone"neutral" | "accent" | "success" | "warning" | "danger" | "info"neutralColour tone for the vocabulary variants.
openboolean-Controlled open state.
defaultOpenbooleanfalseInitial open state when uncontrolled.
onOpenChange(open: boolean) => void-Called when the open state changes.
disabledbooleanfalsePrevents toggling.

CollapsibleTrigger / CollapsibleContent

PropTypeDefaultDescription
asChildbooleanfalseMerge props onto the child element, for example a Button.
forceMountboolean-Content only: keep mounted for custom animation control.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Collapsible } from "@glinui/ui"

Source Files

collapsible.tsx

Dependencies

@glinui/ui@radix-ui/react-collapsibleclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/collapsible.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

CollapsibleProps

CollapsibleContentProps

No explicit fields extracted for this props type.

CollapsibleProps

PropTypeRequiredDefaultDescription
toneSurfaceToneNo--
variantSurfaceVariant | "default" | "raised" | "frosted"No-Surface variant. Omit for the ambient design style (glinr by default, plain under `minimal`). Vocabulary: glinr, solid, plain, soft, outline, ghost, gradient, glass. `ghost` is chromeless like the shadcn primitive.

CollapsibleTriggerProps

No explicit fields extracted for this props type.