UI components for vibe coding, in a style you choose
Claude Code, Cursor, v0 and Lovable reach for the same defaults: the purple gradient, the stock card, three feature boxes under a centred hero. viberdy.dev is a library of React + Tailwind components, backgrounds and 13 whole-site kits in named design styles to start from instead. Every entry has a live preview, its source, a prompt for your AI tool and a one-line shadcn install; 161 are free with no account.
Why AI-built sites all look the same
An AI tool asked for a modern landing page gives you the middle of everything it has seen: one sans-serif, a violet-to-blue gradient, a centred headline and a row of identical cards. Adding “modern” or “clean” to the prompt barely moves it, because those words describe that same middle.
What does move it is a specific starting point. Pick one named style, start from components that already look like it, and let the tool adapt them to your content instead of inventing a look from nothing. That is what each kit here is: one style, designed as a whole site, then cut into pieces you can take one at a time.
Two ways into your project
Claude Code · Cursor · Windsurf · Codex
Install it
Agents that run commands can install any entry with the shadcn CLI. The source lands in your repo, so the agent can read and change it like the rest of your code.
npx shadcn@latest add https://viberdy.dev/r/liquid-glass-button.jsonv0 · Lovable · Bolt · Replit
Paste the prompt
Chat builders take the prompt written for each entry, or its source. Paste it in, then ask for your own copy, colours and content. Every free prompt is listed, with a link to the full text, in the UI prompt library.
Start with a free entry
One look from each of six kits. No account needed.
Liquid Glass Button
componentsA pill of liquid glass that bends what is behind it: real refraction at the rim, a rim and sheen lit by your pointer, and a gel-like press.
Pointer Warp Dot Field
backgroundsA canvas dot grid that bulges and brightens away from the cursor.
Weight Wave Text
text effectsPer-character variable font weight that swells around the pointer and drifts when idle.
Squash Press Button
componentsA pill that squashes under your finger and pops back: it sinks onto its base where you press, deeper the longer you hold, keeps its area as it squashes, and springs back with one overshoot while its tinted shadows collapse and return.
Bayer Fill Button
componentsA button whose fill prints in cell by cell through the 8x8 Bayer order on hover and focus, with its label inverting exactly where each cell lands; press it and the screen halves to a finer grid.
Aurora Glow Button
componentsA night-glass pill with a sliver of aurora under it, turning on a 60s clock that every button on the page shares, spreading on hover and sending a ring of light out on press.
Pick a look, get the kit
- GlassmorphismTranslucent frosted and refractive panels, rim light and layered depth.
- Bento BoxContent filed into a grid of rounded compartments of mixed sizes.
- BrutalismThick ink borders, hard offset shadows, one loud accent and presses that land exactly.
- Dark PrecisionOLED black, 1px hairlines and light that answers the pointer: beams, lit borders, lit grids.
- Liquid ChromeMolten chrome, iridescent foil and dispersion glass: surfaces that ripple and shine.
- Diffused GlowSoft grainy halos on deep or jewel-tone fields, a refined serif and one calm reaction per view.
- AuroraLight curtains on a dark sky that drift slowly and lean toward the pointer.
- Kinetic TypeType as the interface: variable-font axes and letters that move, answer and rebuild.
- Spatial 3DReal-time 3D objects and sculpted forms you can orbit, with depth-aware UI around them.
- Dither & ASCIIReal-time dithering, halftone and ASCII shaders that make any image look printed on purpose.
- Modern MinimalLight, quiet layouts where restraint is earned by motion: scroll reveals, scrubs, view transitions.
- Tactile MaximalismOne oversized headline, one loud accent, grain and squishy spring physics: loud but composed.
- Broken GridA visible grid and one rule that breaks it: every third module overlaps its neighbour, and the break passes on as the layout changes.
Questions vibe coders ask
Pricing and licence questionsDoes it work with Claude Code, Cursor, v0, Lovable and Bolt?
Yes. Every entry installs with the shadcn CLI, which agents such as Claude Code and Cursor can run for you, and every entry has a prompt written to be pasted into a chat builder such as v0, Lovable or Bolt.
How is this different from shadcn/ui?
It installs the same way, through the shadcn CLI. shadcn/ui gives you neutral building blocks; viberdy.dev gives you finished looks, standalone and delivered through the same CLI: heroes, backgrounds, text effects and whole-site kits in named design styles.
Do I have to pay to try it?
No. 161 entries are free with no account, and every Pro entry has a live preview you can use before you decide.
Can I use it in client work?
Yes. Free and Pro entries can both be used in unlimited personal and commercial projects, client work included, under the MIT License with a Commons Clause. You just can't resell the components themselves.