Skip to main content
We recommend using @subframe/cli to initialize your project. If you’re troubleshooting issues, you can follow the steps below instead.
This guide will walk through all of the steps needed to get Subframe working in your codebase. We’ll assume you have a project with the following file structure: 
my-app/
|-- src/
|   |-- main.tsx
|   `-- styles.css
|-- index.html
|-- package.json
`-- tsconfig.json
1

Create a .subframe/sync.json file

.subframe/sync.json
{
  "directory": "./src/ui",
  "importAlias": "@/ui/*",
  "projectId": "YOUR_PROJECT_ID"
}
The file contains three settings:
  • directory: The directory where your Subframe components will be synced to.
  • importAlias: The import alias for your Subframe components.
  • projectId: The project ID for your Subframe project.
You can find YOUR_PROJECT_ID in your URL in the Subframe app: https://app.subframe.com/<YOUR_PROJECT_ID>/rest/of/urlFor example, if the URL you see is https://app.subframe.com/abcdef123456/library, your project ID is abcdef123456.
2

Install dependencies

Subframe depends on @subframe/core. Run the following command to install the dependencies:
npm install @subframe/core@latest
3

Sync your Subframe components

Run the following command to sync your Subframe components and theme to your codebase:
npx @subframe/cli@latest sync --all
The Subframe CLI will look for the project settings in your .subframe directory. It may ask you for an access token to authenticate with your project.
4

Configure Tailwind to use Subframe's theme

After syncing, Subframe creates theme configuration files. You need to import these into your Tailwind setup.You can configure which version of Tailwind CSS you’re using in your project settings.
Extend your tailwind.config.js with your Subframe theme:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
  presets: [require("./src/ui/tailwind.config")],
}
Anytime you update your theme in Subframe, you’ll need to rerun sync again to update the theme in your codebase. You can view the generated tailwind.config.js file in your Subframe theme.