create-react-section

Scaffold a TSX Shortcode Builder project — React 19 + Tailwind CSS v4 + Vite — in one command.

Usage

pnpm create react-section my-project
cd my-project

Or with npm / npx:

npm create react-section@latest my-project

What you get

my-project/
├── scripts/
│   ├── shortcode.mjs       # Build a shortcode bundle
│   └── create-block.mjs    # Scaffold a new block
├── src/
│   ├── components/blocks/
│   │   └── block1/
│   │       ├── block1.tsx
│   │       └── block1.module.css
│   ├── lib/utils.ts        # cn() helper (clsx + tailwind-merge)
│   ├── src.tsx             # Active entry point
│   ├── main.jsx            # Auto-generated by shortcode CLI
│   └── style.css           # Tailwind + CSS vars
├── index.html
├── vite.config.js
├── tsconfig.json
└── package.json

Workflow

1. Create a block

pnpm run create:block hero

Generates src/components/blocks/hero/hero.tsx and hero.module.css, then updates src/src.tsx to export it.

2. Dev server

pnpm dev

3. Build a shortcode bundle

pnpm shortcode hero --build

Output:

dist/hero/app.js
dist/hero/app.css
dist/links.json

4. Choose a specific export

pnpm shortcode hero HeroVariant2 --build

5. Custom base URL

MSC_BASE_URL=https://example.com/project/ pnpm shortcode hero --build

Mounting on a page

<link rel="stylesheet" href="dist/hero/app.css">
<div data-msc-shortcode="hero"></div>
<script type="module" src="dist/hero/app.js"></script>

Multiple instances on one page are supported — the script uses querySelectorAll.

Stack

| Tool | Version | |------|---------| | React | 19 | | Vite | 7 | | Tailwind CSS | 4 | | TypeScript | via tsconfig | | motion | 12 | | clsx + tailwind-merge | latest |