Skip to content
tileio

Menu

12 layers · 5 free

v0 prompts for UI components with real interaction

v0 is at its best generating React components, and the hard part of a component is rarely its look: it is the behaviour. These twelve prompts describe the interaction precisely, down to keys, timing and edge cases, so v0 gets it right the first time.

A command palette that opens on Cmd K with fuzzy matching. A theme switch where the sun turns into the moon. A modal that scales up from the button you pressed, toasts that stack and shuffle back, a dropdown that unfolds from its anchor, a side drawer you can drag shut. Inputs that turn words into tags, spread a pasted code across six boxes, score a password live and float a value bubble over a range slider. A sidebar that collapses to an icon rail and a tab bar whose highlight stretches as it travels.

Choose Next.js or React before copying: you get a typed component with its CSS as a module or Tailwind v4 classes and the script in useEffect with cleanup, which drops into a v0 project or your own.

The 12 layers, in order

  1. Cmd K opens a palette with fuzzy matching and highlighted letters.

  2. A theme switch where the sun becomes the moon as the knob slides across.

  3. A modal that scales up from the button you pressed, with a short overshoot.

  4. Toasts that stack in the corner, the older ones shuffling back as new ones arrive.

  5. A dropdown that unfolds from its anchor and highlights items as you move.

  6. A side drawer over a dimmed page with a handle you can drag to close.

  7. A field that turns words into chips; Backspace on an empty field pulls the last one back.

  8. Six code boxes: typing advances, Backspace steps back, a pasted code fills them all.

  9. A password field with a four-segment meter that fills and changes colour as it improves.

  10. A range slider whose filled track and value bubble follow the thumb.

  11. A dashboard sidebar that collapses from labelled list to slim icon rail.

  12. A tab row whose highlight pill stretches as it glides to the clicked tab.

Browse the full catalogue: Elements

Questions

What makes a good v0 prompt?

Say what the component does, not just how it looks: its states, keyboard behaviour, timing and edge cases. Each prompt here does that and quotes the reference markup, styles and script, so v0 has an exact target.

Do these work with shadcn/ui and Tailwind?

Yes. With the Next.js target the prompt allows Tailwind v4 classes or a CSS module and keeps colours in tokens, so you can ask v0 to map them onto your shadcn theme variables.

Is Tileio affiliated with v0?

No. Tileio is an independent library of design layers and prompts. The prompts are plain text, so they work in v0 and in any other AI coding tool that writes HTML, CSS and JavaScript.

Which of these are free?

Toast Stack, Popover Menu, Tag Input, OTP Boxes Input and Sliding Tab Bar Nav. Free layers are for personal projects; commercial use needs Pro or Lifetime.

Related collections

All collections