Quickstart

Get a sample Subframe page running in your local environment in 1 minute.

Next.js

Vite

Manual

Build your first page

Make sure to first

Sync your components

This is a one-way sync from Subframe to your code base. It will add the components needed by your page or update them if you've made changes in Subframe since your last sync.

Copy your page code

Copy and paste the code below into src/App.tsx in your code editor. We use a copy / paste workflow for pages because you will modify this code with the custom business logic of your app.

"use client";

import React from "react";
import { Alert } from "@/subframe/components/Alert";
import { Button } from "@/subframe/components/Button";

function InstallationSuccessPage() {
  return (
    <div className="container max-w-none flex h-full w-full flex-col items-center gap-8 bg-default-background py-12">
      <img
        className="h-6 flex-none object-cover"
        src="https://res.cloudinary.com/subframe/image/upload/v1711417518/shared/fdb8rlpzh1gds6vzsnt0.svg"
      />
      <div className="flex w-full max-w-[576px] flex-col items-center gap-4">
        <div className="flex w-full flex-col items-center gap-4 rounded-md bg-brand-100 px-12 py-12">
          <span className="font-['Inter'] text-[40px] font-[600] leading-[40px] text-default-font">
            🥳
          </span>
          <div className="flex flex-col items-center gap-1">
            <span className="text-heading-3 font-heading-3 text-default-font">
              Nice work, you&#39;re all set up!
            </span>
            <span className="text-body font-body text-subtext-color">
              Get started building your own UI below
            </span>
          </div>
        </div>
        <div className="flex w-full items-center gap-4">
          <Alert
            className="h-auto grow shrink-0 basis-0 self-stretch"
            icon="FeatherTerminalSquare"
            title="Components are synced"
            description="Run the CLI anytime you add or edit components"
          />
          <Alert
            className="h-auto grow shrink-0 basis-0 self-stretch"
            icon="FeatherClipboardCheck"
            title="Pages are copy & pasted"
            description="Export your code to a .tsx file and start developing"
          />
        </div>
        <div className="flex w-full flex-col items-center">
          <div className="flex w-full flex-col items-center gap-6 bg-default-background px-6 py-6">
            <div className="flex w-full flex-col items-center">
              <div className="flex w-full items-start gap-4">
                <div className="flex flex-col items-center self-stretch pt-1.5">
                  <div className="flex h-2.5 w-2.5 flex-none flex-col items-start gap-2 rounded-full bg-brand-600" />
                  <div className="flex w-0.5 grow shrink-0 basis-0 flex-col items-start gap-2 bg-brand-600" />
                </div>
                <div className="flex grow shrink-0 basis-0 flex-col items-start gap-1 pb-9">
                  <div className="flex w-full flex-col items-start gap-1">
                    <span className="text-body-bold font-body-bold text-default-font">
                      Build your first page
                    </span>
                    <span className="w-full text-caption font-caption text-subtext-color">
                      Choose from our designer-curated templates, or start from
                      scratch.
                    </span>
                  </div>
                </div>
              </div>
              <div className="flex w-full items-start gap-4">
                <div className="flex flex-col items-center self-stretch">
                  <div className="flex h-1.5 w-0.5 flex-none flex-col items-start gap-2 bg-brand-600" />
                  <div className="flex h-2.5 w-2.5 flex-none flex-col items-start gap-2 rounded-full bg-brand-600" />
                  <div className="flex w-0.5 grow shrink-0 basis-0 flex-col items-start gap-2 bg-brand-600" />
                </div>
                <div className="flex grow shrink-0 basis-0 flex-col items-start gap-2 pb-9">
                  <div className="flex w-full flex-col items-start gap-1">
                    <span className="text-body-bold font-body-bold text-default-font">
                      Export page code
                    </span>
                    <span className="w-full text-caption font-caption text-subtext-color">
                      Copy &amp; paste generated code to your project, just like
                      you did here.
                    </span>
                  </div>
                </div>
              </div>
              <div className="flex w-full items-start gap-4">
                <div className="flex flex-col items-center self-stretch">
                  <div className="flex h-1.5 w-0.5 flex-none flex-col items-start gap-2 bg-brand-600" />
                  <div className="flex h-2.5 w-2.5 flex-none flex-col items-start gap-2 rounded-full bg-brand-600" />
                </div>
                <div className="flex grow shrink-0 basis-0 flex-col items-start gap-4">
                  <div className="flex w-full flex-col items-start gap-1">
                    <span className="text-body-bold font-body-bold text-default-font">
                      Write your business logic
                    </span>
                    <span className="text-caption font-caption text-subtext-color">
                      The code is all yours! Refactor or add custom code to your
                      pixel-perfect UI.
                    </span>
                  </div>
                  <Button
                    icon="FeatherCode"
                    onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
                  >
                    Try adding an onClick handler to me!
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default InstallationSuccessPage;

Start the server

Open your app locally and verify that everything is working properly. You can now export your designs to code!

Code structure

Depending on which exact framework and version you're using, your code structure will look something like this:

1.
2│── .subframe
3│   │── access-token
4│   └── sync.json
5├── public
6│   └── ...
7├── src
8│   ├── assets
9│   │   └── ...
10│   ├── subframe
11│   │   ├── components
12│   │   │   ├── Alert.tsx
13│   │   │   ├── Button.tsx
14│   │   │   └── ...
15│   │   ├── layouts
16│   │   │   ├── DefaultPageLayout.tsx
17│   │   │   ├── DialogLayout.tsx
18│   │   │   └── ...
19│   │   ├── index.ts
20│   │   └── tailwind.config.js
21│   ├── App.tsx
22│   ├── index.css
23│   └── main.tsx
24├── .gitignore
25├── index.html
26├── package.json
27├── package-lock.json
28├── postcss.config.js
29├── tailwind.config.js
30├── tsconfig.json
31└── vite.config.ts
32

Project sync settings are found in .subframe. The access-token file is automatically added to your .gitignore
Fonts used by your theme are loaded in index.html
Pages you design in Subframe go in src/App.tsx and future pages will go in src/ depending on how you implement routing
The Subframe component library and your custom components are synced into src/subframe/components
Subframe layouts are found in src/subframe/layouts
Your Subframe theme is setup in src/subframe/tailwind.config.js
Some minor Subframe specific configuration occurs intailwind.config.js and tsconfig.json

Built in Subframe

ProductComponents Theme Templates Installation Quick start Pricing

CompanyBlog LinkedIn X / Twitter Github

ResourcesSlack community Help center For agencies For design systems Subframe vs Figma