QuickstartGet a sample Subframe page running in your local environment in 1 minute.
Build your first page
Sync your componentsThis 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 codeCopy and paste the code below into your main page (e.g. src/app/page.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="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'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 & 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 serverOpen 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│ │── index.html
7│ └── ...
8├── src
9│ ├── subframe
10│ │ ├── components
11│ │ │ ├── Alert.tsx
12│ │ │ ├── Button.tsx
13│ │ │ └── ...
14│ │ ├── layouts
15│ │ │ ├── DefaultPageLayout.tsx
16│ │ │ ├── DialogLayout.tsx
17│ │ │ └── ...
18│ │ ├── index.ts
19│ │ └── tailwind.config.js
20│ ├── App.tsx
21│ ├── index.tsx
22│ └── ...
23├── .gitignore
24├── package.json
25├── package-lock.json
26├── postcss.config.js
27├── tailwind.config.js
28└── tsconfig.json
29
- 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 in
tailwind.config.js and tsconfig.json
