edbnedbn/ui
Get Started
WelcomeWhy We're DifferentChoosing a VariantChangelogLicense
Components
OverviewAlert DialogCheckboxCollapsible
DialogFieldInputMenuNumber FieldPopoverProgressRadioScroll AreaSelectSeparatorSliderSwitchTabsToggleTooltip
Shared Components
InputTextareaCardAvatarTableAlertBreadcrumbPagination
0installs
Components
Maps
GitHub stars
HomeDocsComponentsStaticCollapsible

On this page

Collapsible

An interactive component which expands/collapses a content panel. Built on Base UI Collapsible primitives.

@kewonit starred 3 repositories
@radix-ui/primitives

Usage

import {
  CollapsibleRoot,
  CollapsibleTrigger,
  CollapsiblePanel,
} from "@/components/ui/static/collapsible"
<CollapsibleRoot>
  <CollapsibleTrigger>
    Toggle content
  </CollapsibleTrigger>
  <CollapsiblePanel>
    Collapsible content goes here
  </CollapsiblePanel>
</CollapsibleRoot>

Installation

Install dependencies

TypeScript
npm install @base-ui/react

Examples

FAQ Section

API Reference

openboolean

Controlled open state.

defaultOpenboolean
=false

Initial open state when uncontrolled.

onOpenChange(open: boolean) => void

Callback when open state changes.

disabledboolean
=false

Whether the collapsible is disabled.