A Vue component library with tools attached.

Everything here runs in your browser. No account, and nothing you drop in gets uploaded anywhere.

Components

Built on reka-ui and Tailwind. Each page gives you a live preview, the source, an API table, and the keyboard shortcuts that component handles. Copy what you need and move on.

See all components Read the intro

Button

Buttons, and the things that need to look like one.

Command

The ⌘K palette: fuzzy search, groups, and a modal wrapper.

Chart Area

Single or multi-series areas, with stacking and gradient fills.

Calendar

Single dates, ranges, or multiple, from one component.

Message Scroller

Stays pinned to the bottom while a reply streams in.

Sidebar

Collapses, goes off-canvas, and drops to icons only.

Input OTP

One slot per character, for 2FA and sign-in codes.

Icon Picker

Search the project's icon sets and store the name.

Shaders

GPU backgrounds and logo effects you can drop straight into a hero. Open one in the editor, drag the sliders until it looks right, then export it as Vue, React, Svelte, or a still image.

Open the gallery Open the editor

Northern Lights

Soft aurora bands for a dark hero.

Oil Slick

Pastel iridescence that stays out of the way.

Fluid Chrome

Liquid metal wrapped around your mark.

Frosted Glass

Your logo behind glass, lit from below.

Liquid Lenses

Refracted panels drifting over blue.

Halftone Swirl

Print dots over a slow color drift.

Metallic Waves

Brushed streaks catching the light.

Dithered Reveal

Dither a photo, then wipe it clean.

Color palettes

Ready-made scales you can read at a glance. Click any swatch to copy it as hex, OKLCH, a CSS variable, or the Tailwind class name.

See the palettes

rose

amber

emerald

blue

violet

mauve

Palette generator

Give it one color and it works out the rest of the scale using the same curves Tailwind uses, so the light end stays usable and the dark end doesn't go muddy. Check contrast as you go, then copy it out as @theme, plain CSS, or JavaScript.

Open the generator

#AC0D31

100

200

300

400

500

600

700

800

900

950

Color converter

One color into every CSS format, or paste a whole block of variables and convert the lot. Your indentation and comments come back the way you left them.

Open the converter

HEX#AC0D31

RGBrgb(172 13 49)

HSLhsl(346 85.9% 36.3%)

HWBhwb(346 5.1% 32.5%)

OKLCHoklch(0.476 0.185 18.516)

OKLaboklab(0.476 0.175 0.059)

Lablab(37.213% 59.443 26.944)

LCHlch(37.213% 65.265 24.384)

Themes

Pick a style, a base color, a font, and a radius. The showcase below redraws in whatever you choose. When it looks right, copy the preset code and paste it into another project.

Open the theme builder