Collapsible

Expandable content sections with hard shadows and crisp borders. The collapsible component creates a stacked card effect, maintaining the paper-like tactile feel of the Hard-Edge Stack design system.

Basic Usage

Default Open State

1. Zero Blur: All shadows use a blur radius of 0, creating crisp, defined edges.

2. Solid Borders: Carbon black (#111111) borders ensure maximum contrast and clarity.

3. Offset Shadows: Depth is created purely through offset positioning.

FAQ Style

Framer Motion Animation

Smooth spring-based animation using framer-motion.

With Custom Trigger

Repository Settings

3 configuration options available

Settings Panel Style

Slide Animation

Content slides down from the trigger.