Getting started: React components for Cursor

DesignLayer is a component catalog for developers shipping product and marketing pages in React, Next.js, and Tailwind. If you already hunt motion blocks on 21st.dev and paste them into a coding agent, this is the same workflow with live preview first.

Generic kits converge on the same SaaS look. Finding sections with a signed motion language takes time. DesignLayer shows finished human-built sections running in the browser, then lets you copy the implementation into your repo.

Components run as live React. Check hover, entrance, and scroll timing on the real block, then Copy for Cursor to get TSX plus an agent-oriented wrap.

Copy for Cursor is free 3 times per day for components (Japan time). Preview never needs a card. Plus and Pro include unlimited component copies. Copying complete one-page Templates is Pro (coming soon).

Open the component catalog, watch the motion, then copy. Paste into Cursor Composer or a Claude chat and say: put this TSX in the app tree, install missing deps, swap copy and color for our product.

When you want a full landing composition in one paste, open Templates. Preview is public; copy is Pro. Existing monthly subscribers keep their plan.

Output assumes React (TypeScript) and Tailwind. Motion libraries vary by section (for example Framer Motion). Ask the agent to add whatever the imports require.

Copied code is a starting point. Wire copy, links, brand tokens, and data in your own repository.