Skip to main content

​
Prerequisites

Subframe generates React components with Tailwind CSS. Your project needs:
  • React 16+
  • Tailwind CSS 3.4+
  • TypeScript

​
Install Subframe

Start from a new project or install in an existing project. Our CLI is open source and will help you get started quickly.
Run our CLI in a blank folder to scaffold a new pre-configured project and follow the prompts:
npx @subframe/cli@latest init

​
Install fonts

Your Subframe theme may use a Google Font or an uploaded custom font. You’ll need to add a snippet to your codebase to render the fonts correctly.
1

Copy the font import snippet

You can get the import code snippet from your Subframe theme
2

Add the code snippet to your `<head>` tag

<head>
  <!-- Insert the font import snippet you copied here -->
  <!-- Example: importing the Inter font... -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
    rel="stylesheet"
  />

  <!-- Remaining code in your `<head>` tag... -->
</head>

​
Set up Subframe MCP (optional)

Subframe’s MCP server lets AI tools like Cursor and Claude Code fetch your designs directly. Instead of copying code manually, AI can access your components, pages, and theme automatically.
One-click installation
  1. Open a page in Subframe
  2. Go to Code > Installation > Cursor MCP server
  3. Click on Add to Cursor Add to Cursor button
Manual installationCreate a new auth token at app.subframe.com/settings/tokens and add the following to ~/.cursor/mcp.json:
~/.cursor/mcp.json
{
  "mcpServers": {
    "subframe": {
      "url": "https://mcp.subframe.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_AUTH_TOKEN"
      }
    },
    "subframe-docs": {
      "url": "https://docs.subframe.com/mcp"
    }
  }
}
See our MCP server guide for more information on how to use the MCP server.

​
FAQ

You can use our MCP server to access your designs and documentation in your AI coding assistant and convert them to your preferred language and framework.While Subframe only generates React + Typescript + Tailwind code for now, we found that in practice, asking AI to convert the code to your preferred framework is far faster than starting from scratch. Our generated frontend code is high-quality and consistent, without the overhead that most LLMs add to AI-generated UI code, so AI’s often are able to convert the code to your preferred framework consistently in a single prompt.
Yes. All generated code lives in your codebase and is yours to keep. Any dependencies you see are open source .
Join our active Slack community for additional support from the Subframe team and other users.
Last modified on January 20, 2026