Collapsible

Sculpted collapsible panels with inset shadow effects for a carved, tactile interface.

Basic

A simple collapsible with default styling.

External Trigger

Control the collapsible with an external button.

Project Settings

EnvironmentProduction

FrameworkNext.js 14

Node Version20.x

Multiple Panels

Stack multiple collapsible panels for organized content sections.

The Soft Sculpt design system creates UI elements that appear carved into the interface, using carefully calibrated inset shadows to achieve a tactile, dimensional effect.

Nested Collapsible

Multi-level collapsible for hierarchical content structures.

Code Block

Collapsible code blocks for showing/hiding long code snippets.

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Calculate the 10th Fibonacci number
const result = fibonacci(10);
console.log(result); // 55

File Tree

IDE-style file browser with expandable folders.

Button.tsx

Card.tsx

Dialog.tsx

index.ts

package.json

tsconfig.json