Mokri

Preview

<> import.ts

import { Collapsible } from "@/components/ui/collapsible"

<> component.tsx

import { Collapsible } from "@/components/ui/collapsible"

<Collapsible />

An expandable/collapsible content panel with animated transitions.

<> import.ts

import { Collapsible, CollapsibleGroup, CollapsiblePresets, CollapsibleIcons } from "@/components/ui/collapsible"

Prop	Type	Default	Description
`title`	`string`	—	Header text
`children`	`React.ReactNode`	—	Content to reveal
`defaultOpen`	`boolean`	`false`	Initial open state
`className`	`string`	`""`	Additional CSS classes
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Sizing for padding and text
`variant`	`"default" \| "bordered" \| "minimal"`	`"default"`	Visual style
`icon`	`React.ReactNode`	—	Optional leading icon
`disabled`	`boolean`	`false`	Disables toggle interactions

<> example.tsx

// Basic
<Collapsible title="Details">Hidden content</Collapsible>

<> example.tsx

// With preset
<Collapsible {...CollapsiblePresets.faq} title="FAQ">Answer</Collapsible>

faq

Bordered, medium size

settings

Default variant, small size

docs

Minimal variant, medium size

panels

Bordered, large size