How it works

1 · Hand it to your AI agent

Copy prompt puts a one-shot rebuild prompt on your clipboard. It contains the complete source of a small Vite project — the component, its CSS and the example from the page — file by file, with instructions to reproduce it exactly.

1. Open an empty folder in Claude Code, Cursor, Codex, v0 or Bolt.
2. Paste the prompt and send it.
3. Run npm install and npm run dev.

Before a prompt ships, our build parses it back into files and compares every byte with the source, and we rebuild the project from the prompt and run its build. If the agent you use drifts, the project download below is the exact original.

2 · Paste the code

View codeshows the component's own files. Save them next to each other in your project and import the component — the stylesheet is imported by the component itself:

src/components/StackScroll.tsx
src/components/StackScroll.css

import { StackScroll } from "./components/StackScroll";

No other dependencies: React 19 is the only one. The usage snippet under each live demo shows the props you tuned.

3 · Run the project

Download .zip gives you the whole Vite + React + TypeScript project with pinned versions — the same files the prompt builds. Unzip, npm install, npm run dev.

Next.js, Remix, Astro

Components use effects and pointer events, so they run on the client. Each file starts with "use client";, so in the Next.js App Router you can import them straight into a server page. Global CSS imported from a client component is fine in the App Router; in the Pages Router, import the .css from _app.tsx instead. In Astro, use them as islands with client:visible.

Styling and theming

Each component's CSS uses its own short class prefix (ss__card, vm__item…), so nothing collides with your own styles or with Tailwind. Colours, radii and sizes are props or CSS custom properties on the root element — set them from your design system. Text inherits your font.

Props and the playground

Every knob in the playground is a real prop. The usage snippet only writes props that differ from the component's defaults, so what you copy reproduces exactly what you saw. Each component file documents every prop with a comment.

Reduced motion and accessibility

Every component honours prefers-reduced-motion: scroll effects render in their finished state, pointer effects stay still. Text stays real text, and repeated or decorative layers are aria-hidden. Each component page says exactly what it does.

Versions and updates

Projects pin React, Vite and TypeScript to releases at least two weeks old. When we improve a component, its page and its prompt update together; anything you've already shipped keeps working and stays licensed to you.

Questions? Read the FAQ or write to support@snapblocks.site.