Component Showcase

A demonstration of all available components with their variants and states.

Button Component

Variants

Sizes

States

Interactive

Input Component

Basic Input

With Label

With Helper Text

Choose a unique username for your account

With Error

Password must be at least 8 characters

Disabled State

RichText Component

Rich Text Editor

Try typing and using Cmd+B for bold, Cmd+I for italic...
Keyboard shortcuts: Cmd+B Bold, Cmd+I Italic, Cmd+U Underline

Disabled State

Enter text...
Keyboard shortcuts: Cmd+B Bold, Cmd+I Italic, Cmd+U Underline

Interactive Canvas Component

Glow Effect

Hover me!

Move your mouse around to see the glow effect

Spotlight Effect

Spotlight Effect

Move your mouse to reveal the content beneath the darkness

Feature 1

Hidden content revealed

Feature 2

Interactive experience

Custom Effect

React Three Fiber - 3D Components

Interactive 3D components built with @react-three/fiber and @react-three/postprocessing. Declarative, component-based 3D graphics with built-in post-processing effects.

📦 Installation Required

npm install three @react-three/fiber @react-three/drei @react-three/postprocessing postprocessing

Rotating Cube with Bloom

Animated Particle Field

Interactive Wave Mesh

Glitch Effect

All components support dark mode and are fully responsive.