Build Your First Storefront Theme

Create a customizable storefront theme.

Step 1: Create the Project

Scaffold a Vite + React app, install the SDK (the threeu CLI comes with it), and add a threeu.json — see [Project Setup](/docs/cli-create) for the full manifest:

Setup

Shell

npm create vite@latest modern-luxury -- --template react-ts
cd modern-luxury
npm install threeu-sdk

# threeu.json (minimum; add the full manifest before publishing)
# { "kind": "theme", "key": "modern-luxury", "name": "Modern Luxury", "version": "1.0.0", "manifest": { ... } }

Step 2: Build Pages

Create pages with editable components:

Theme with Editable Components

TSX

import {
  createTheme, TImage, THeading,
  TParagraph, TSection
} from "threeu-sdk/theme";

function HomePage() {
  return (
    <TSection name="home.hero">
      <TImage name="home.hero.image" src="/hero.jpg" alt="Hero" />
      <THeading name="home.hero.title">Welcome</THeading>
      <TParagraph name="home.hero.subtitle">
        Discover our latest collection.
      </TParagraph>
    </TSection>
  );
}

export default createTheme({
  name: "Modern Luxury",
  slug: "modern-luxury",
  visibility: "public",
  pages: { home: HomePage }
});

Step 3: Preview & Publish

Run locally with the Vite dev server in preview mode (demo brand + demo data — required, the review sandbox has no API access), build to preview-dist/, then publish:

Preview & Publish

Shell

npm run dev                    # VITE_THREEU_PREVIEW=true → demo data
npm run build                  # → preview-dist/index.html
npx threeu publish --dry-run   # validate + bundle
THREEU_DEVELOPER_TOKEN="$TOKEN" npx threeu publish

Step 4: Converting an Existing Site?

If you already have a site (a base44 app, or any React/Vite project), do not start from scratch — follow [Converting an Existing Site into a Theme](/docs/themes-convert).

Build Your First Plugin

Build Your First Admin App