Collapsible

Expandable content sections with Paper Cut's 4-level elevation system.

Basic Usage

The default collapsible uses default (Level 3) elevation — subtle shadow at rest with medium lift on hover/open for general containers.

Variants

Four elevation levels for different contexts. Choose based on the component's role in the interface hierarchy.

Elevated (Level 4)

Strong shadow with lift animation. For Landing Pages, Hero sections, and spotlight moments.

Default (Level 3)

Subtle shadow with a moderate lift. The standard choice for general containers and panels.

Outlined (Level 2)

Border at rest, subtle lift on interaction. Lightweight and clean for dense layouts.

Flat (Level 1)

No border, no shadow. For nesting inside Cards or other elevated containers.

Icon Variations

Different icon styles for expand/collapse indication.

Best Practices

Real-world scenarios demonstrating proper elevation budget allocation. The key principle: one region should have only one "hero" — the outer container owns the elevation while inner controls remain flat.

Landing Page FAQ

Use elevated for maximum visual impact on marketing pages.

Settings Panel

Use flat inside an outer container for grouped settings.

Nested in Card

Use flat when the container already owns elevation.

Help Center

Anti-patterns

Common mistakes to avoid. The primary concern is elevation budget — stacking multiple elevated containers creates visual noise.

Bad: Double Shadow

Good: Card + Flat

API Reference

Collapsible is built on top of Radix UI Collapsible primitive with Paper Cut's 4-level elevation system.

Collapsible

PropTypeDescription

variant"elevated" | "default" | "outlined" | "flat"Elevation level (Level 4, 3, 2, 1)

liftbooleanEnable/disable lift interaction (defaults to on except flat)

openbooleanControlled open state

defaultOpenbooleanUncontrolled initial open state

onOpenChange(open: boolean) => voidCalled when open state changes

Elevation Levels

VariantLevelShadowUse Case

elevatedLevel 4Strong + liftLanding pages, hero sections

defaultLevel 3Medium + liftGeneral containers, panels

outlinedLevel 2Border + subtle liftSidebars, settings, dense layouts

flatLevel 1NoneNested inside elevated containers