Pure UI
DocsComponentsBlocksNEW
141

Docs

IntroductionGet Started
Installation
Theming

Components

AccordionAvatarBadgeButtonButton GroupCalendarCardCheckboxCollapsibleCombobox
Detached Triggers
DialogInputInput GroupInput OTPKbdLabelMenuNumber FieldPopoverRadio GroupNEWScroll AreaSelectSeparatorSheetSpinnerSwitchTabsNEWTextareaToastTooltip

Collapsible

An interactive component which expands/collapses a panel.

Installation

Loading content...

Anatomy

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

<Collapsible>
  <CollapsibleTrigger>Open details</CollapsibleTrigger>
  <CollapsiblePanel>Here are the details.</CollapsiblePanel>
</Collapsible>;

Animation Presets

You can use the animationPreset prop to change the animation preset of the collapsible.

<CollapsiblePanel
  animationPreset="scale"
>
  // your content here
</CollapsiblePanel>

Scale

Fade

Slide Outside

Slide Inside

Motion

Motion Blur

Perspective

Perspective Blur