RepCN

Paste a React component, pick Next.js, Vite, or TanStack, preview the repo, then download a ZIP or push to GitHub.

Repository name

React component

Framework

Choose which repository scaffold to generate, download, and push.

Next.jsApp Router Next.js app with React 19, TypeScript or JavaScript, and Tailwind CSS.ViteVite + React 19 SPA with TypeScript or JavaScript and Tailwind CSS.TanStackVite + TanStack Router + React Query with TypeScript or JavaScript.

Language

Choose TypeScript or JavaScript — repo files and ZIP use matching extensions (.ts / .tsx).

TypeScript.ts / .tsxJavaScript.js / .jsx

shadcn/ui

Include shadcn setup with default Button and Input for both JS and TS scaffolds.

Include shadcn/uicomponents.json · utils · Button · Input · CSS variablesNo shadcnPlain Tailwind only

Adds 6 packages (cva, clsx, tailwind-merge, Radix Slot, animate) and a starter UI strip on the home page.

Packages · Next.js · TypeScript · shadcn

npm install && npm run dev

Static versions shipped in the generated package.json.

dependencies

next^15.1.0
react^19.0.0
react-dom^19.0.0
sonner^1.7.0
lucide-react^0.468.0
class-variance-authority^0.7.1
clsx^2.1.1
tailwind-merge^2.6.0
@radix-ui/react-slot^1.1.1

devDependencies

typescript^5.7.0
@types/react^19.0.0
@types/react-dom^19.0.0
@types/node^22.0.0
tailwindcss^3.4.16
postcss^8.4.49
autoprefixer^10.4.20
tailwindcss-animate^1.0.7

What this repository will create

Next.js App Router project (`app/`, `components/`)
TypeScript or JavaScript + Tailwind + PostCSS config
Your React component mounted on the home page
Ready for `npm run dev`, Vercel deploy, and GitHub push
shadcn/ui with Button + Input, CSS variables, and components.json

·Uses Next.js 15 App Router with React Server Components layout.
·Your component is placed in `components/` and imported from `app/page`.
·Pick TypeScript (`.tsx`) or JavaScript (`.jsx`) before generating.
·Deploy targets Vercel with framework preset `nextjs`.

Instructions

Notes for the generated Next.js app (layout, copy, behavior). They are embedded in the repo README and entry file.

Private GitHub repo

Not connectedNot connected

How people use RepCN

A short loop: get polished React from Claude, turn it into a real repository, then deploy a URL you can share.

Step 1

Get the React code

Ask Claude for a finished UI component. Copy this exclusive pricing board example—or paste it straight into the form above.

import { useState } from 'react'

const plans = [
  {
    id: 'starter',
    name: 'Starter',
    price: 12,
    blurb: 'Ship one product idea with clean defaults.',
    perks: ['1 project', 'ZIP + GitHub push', 'Community support'],
  },
  {
    id: 'studio',
    name: 'Studio',
    price: 29,
    blurb: 'For builders who paste Claude output and deploy same day.',
    perks: ['Unlimited projects', 'Vercel deploy', '…

Step 2

Put code · get a repository

Drop the component into RepCN, pick Next.js / Vite / TanStack, preview the file tree, download a ZIP, then push a real GitHub repo.

01Paste React + instructions
02Preview repository tree & source
03Push to GitHub with one click

Connect your GitHub token above so “Push to GitHub” can create the repo.

Step 3

Deploy to a URL & share

Deploy the generated app to Vercel, grab the live URL, and share it with teammates, clients, or socials—no local setup required.

Example share link

https://your-app.vercel.app

· One-click Deploy to Vercel
· Open the live inspector URL
· Send the link—code lives on GitHub

Connect Vercel above, then use Deploy after you have a preview or repo.