React export - Vibely

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:

Converts the design’s HTML into a React component tree
Creates a fresh Web App project
Drops you into the project with a live preview running

You’re now in Web App Mode, 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:

: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:

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 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 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.

​How to export

​What you get

​Design tokens, not hardcoded values

​TypeScript out of the box

​What ships with the project

​What gets reviewed before code lands

​When to export vs. when to keep designing