> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibely.sh/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React export

> Turn any design into a working React + Tailwind project with one click.

The whole point of Design Mode is that designs don't end as pretty mockups. **React export** turns any design on the canvas into a real React + TypeScript + Tailwind project — components, routes, design tokens, the whole thing — in one click.

## How to export

Two ways:

**Build (recommended)** — Right-click any design → **Build**. Vibely:

1. Converts the design's HTML into a React component tree
2. Creates a fresh Web App project
3. Drops you into the project with a live preview running

You're now in [Web App Mode](/docs/web-app/overview), iterating on real code, with the design as your starting point.

**Export to GitHub** — Right-click → **Export → GitHub**. Vibely creates a repo (or commits to one you choose) with the React project. `bun install && bun dev` runs it locally without ever touching Vibely.

## What you get

A complete project structured around **Atomic Design**:

```
src/
├── components/
│   ├── ui/
│   │   ├── Button.tsx          (atom)
│   │   ├── Input.tsx           (atom)
│   │   └── Badge.tsx           (atom)
│   ├── FeatureCard.tsx         (molecule)
│   ├── PricingCard.tsx         (molecule)
│   ├── Navbar.tsx              (organism)
│   ├── HeroSection.tsx         (organism)
│   └── Footer.tsx              (organism)
├── pages/
│   ├── HomePage.tsx
│   └── PricingPage.tsx
├── App.tsx                     (routes)
└── index.css                   (design tokens — colours, fonts)
```

The atomic hierarchy:

| Level        | Examples                         | What it is                     |
| ------------ | -------------------------------- | ------------------------------ |
| **Atom**     | Button, Badge, Input, Icon       | Smallest UI elements           |
| **Molecule** | Card, FormField, SearchBar       | Groups of atoms with a purpose |
| **Organism** | Navbar, HeroSection, Footer      | Big sections of a page         |
| **Template** | DashboardLayout, MarketingLayout | Page-level layouts             |
| **Page**     | HomePage, DashboardPage          | Full pages, wired with data    |

Components are small, named for what they do, and ready to be edited.

## Design tokens, not hardcoded values

Every colour, font, and spacing value from your design becomes a **CSS custom property** in `index.css`:

```css theme={null}
:root {
  --color-primary: #6366f1;
  --color-background: #0a0a0a;
  --color-surface: #0f172a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #94a3b8;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
}
```

Components reference these via Tailwind classes (`text-primary`, `bg-surface`) — change the token and every component picks up the new value. No hunt-and-replace.

## TypeScript out of the box

Every component is fully typed. Props get explicit interfaces:

```tsx theme={null}
interface PricingCardProps {
  tier: "starter" | "pro" | "enterprise"
  price: number
  features: string[]
  highlighted?: boolean
}

export function PricingCard({ tier, price, features, highlighted }: PricingCardProps) {
  // …
}
```

No `any`, no `// @ts-ignore`. You can pass the project to a strict TypeScript codebase and it'll fit.

## What ships with the project

Everything a normal Vite + React project would have — and everything Vibely's [Web App](/docs/web-app/overview) template ships with:

* Vite + React 19 + Tailwind v4 + shadcn/ui primitives
* TanStack Router for navigation between pages (type-safe, file-based)
* `DESIGN.md` at the project root, documenting the system
* A working `bun dev` / `bun build` setup

The React project is **identical in structure** to what you'd get if you started in Web App Mode directly — meaning everything in [Web App Mode](/docs/web-app/overview) works the same from here: iterate, add a backend, publish, custom domain.

## What gets reviewed before code lands

The export pipeline checks for common issues before handing you the project:

* **Hardcoded hex values** (e.g. `bg-[#6366f1]`) — flagged and replaced with token classes (`bg-primary`)
* **Missing TypeScript interfaces** — added for every component
* **Broken imports** — fixed
* **Accessibility regressions** — focus states and ARIA preserved from the design

You'll see a short summary at the top of the project — *"Generated 7 components, 0 errors, 1 warning"* — so you know what to look at first.

## When to export vs. when to keep designing

| Export when…                                   | Stay in Design Mode when…                               |
| ---------------------------------------------- | ------------------------------------------------------- |
| The design feels right and you want it working | You're still exploring directions                       |
| You need to wire in data, auth, or payments    | You haven't decided which design to ship                |
| You want to ship to a real URL                 | You're presenting concepts to stakeholders              |
| The next thing you need is code, not pixels    | You don't have a developer (designs can ship as-is too) |

You can re-export. Iterated on a design after exporting? Re-export — it creates a new project, or you can copy the new components into the existing one by hand.