Shader UI
Get Started
Introducing Shader UI

Beautiful components with liquid metal effects

A premium design system featuring GPU-accelerated shader effects. Build stunning interfaces with buttons, inputs, cards, and badges that feel alive.

Browse Components
View Documentation
WebGL 2.0
60fps Animations
TypeScript
60fpsSmooth animations with GPU accelerationPerformance
4Core components ready to useComponents
100%TypeScript coverage with full typesType Safe
<5kbMinimal footprint per componentLightweight

Built for modern interfaces

Everything you need to create premium, interactive UI components.

GPU Accelerated

Leverages WebGL 2.0 for buttery smooth 60fps animations with minimal CPU overhead.

Variant Support

Each component supports both shader and standard variants for flexibility.

Interactive Effects

Responds to hover, click, and focus with dynamic liquid metal animations.

Developer Experience

Full TypeScript support, CVA variants, and follows shadcn/ui patterns.

New Component

Holographic Cards

Inspired by Pokemon TCG, these cards feature mouse-tracking 3D rotation and multiple holographic effect types.

Holo

Rainbow effect

Galaxy

Cosmos effect

Rainbow

Full spectrum

Interactive Demo

Try it yourself

Experience the liquid metal effect. Hover and click the components to see the shader respond in real-time.

View full documentation
Small
Default
Large
Badge One
Badge Two

Ready to elevate your UI?

Get started with Shader UI and bring your interfaces to life with premium liquid metal effects.

Get Started