Overview

Components let you reuse UI across your designs.

Same as code — Components in Subframe are the same building blocks your engineers use
Always in sync — When you update a component, all instances update and sync to code
Interactive when needed — Some components like checkboxes and accordions have built-in interaction logic using @subframe/core, our Radix-based headless component library. Learn more about headless components.

The Create a new component dialog with a prompt box above the Start from a template gallery

Importing components

We recommend importing your theme first so that imported components match your design system.

From code
From Figma

Open Components under Project in the left sidebar
Click New component
Paste the source code of an existing component from your codebase into the prompt
Press Enter or click the send button — the agent will take a few minutes to import your component

Example prompt

Recreate the Button component from the following code:

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
        icon: "size-8",
        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
        "icon-lg": "size-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant = "default",
  size = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot.Root : "button"

  return (
    <Comp
      data-slot="button"
      data-variant={variant}
      data-size={size}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }

Creating components using AI

Open Components under Project in the left sidebar
Click New component
Describe the component you want in the prompt
Press Enter or click the send button — the agent will take a few minutes to create your component

Creating components from scratch

Open Components under Project in the left sidebar
Click New component
Choose one of:
- Remix an existing prebuilt component
- Create from scratch

Some prebuilt components are based off of Radix primitives. If you want interactive logic like checked state, you must remix an existing prebuilt component.

Creating components from existing designs

You can create components directly from elements on a page:

Right-click or press / to open quick actions
Select Create component
Name your component
Review the suggested properties
Click Create

Subframe suggests component properties based on the elements you selected.

Editing components

To edit a component:

Open Components under Project in the left sidebar
Click on the component
Click Edit component

To edit a component from the editor:

Right-click or press / to open quick actions
Select Edit component

Any changes you make will update all component instances.

Adding component instances

You can add a component instance by

Open the quick insert menu
Select the component you want to add

Detaching component instances

You can detach a component so the rendered elements are no longer linked to the component.

Right-click or press / to open quick actions
Select Detach instance

Components whose structure relies on tightly coupled primitives — dropdowns, selects, dialogs, drawers, charts, tables, and calendars — can’t be detached. The Detach component action is hidden for these.

Deleting components

You can delete a component from the Components page or from the … menu in the component editor. When a deleted component is used in other designs, Subframe handles existing instances based on the component type. The delete dialog shows what will happen before you confirm:

Instances will be detached — Custom components and most interactive primitives (buttons, switches, checkboxes, sliders, sidebars, navbars). Each instance becomes an independent copy of the rendered elements.
Instances will be deleted — Components whose structure can’t survive on their own (dropdowns, selects, dialogs, drawers, charts, tables, calendars). Customizations inside each instance are removed with it.
Layout assignments will be cleared — Page layouts. The pages using the layout stay, but lose their layout assignment.
References will be removed — Custom pages referenced from prototype actions or other pages.

Most deletes can’t be undone with Cmd + Z. To recover a deleted component, restore an earlier snapshot from Version history.

Resetting components

You can reset a prebuilt component to its original state, reverting any customizations you’ve made.

Right-click or press / to open quick actions
Select Reset to original
Confirm the reset

This restores the component to its default configuration from the Subframe library.

Organizing components into folders

Folders group related components in your component library, for example by product area or release phase.

Open Components under Project in the left sidebar
Click New folder
Click … beside the new folder and select Rename… to name it

To file a component, drag it onto a folder on the Components page or in the left sidebar. You can also click … beside the component, select Move to folder, and pick a folder. Select No folder to take it out. Click a folder to see only its components. Components you create while a folder is open are added to it. To delete a folder, click … beside it and select Delete….

Deleting a folder also deletes the components inside it. To keep them, move them out first.

Sorting components

The Components page lists every component in your project along with when each was last edited. Use the sort control at the top of the list to change the order:

A-Z — Alphabetical by name (default)
Recently edited — Most recently edited first
Recently created — Most recently created first

Viewing component docs

Each component has reference information for its React props, source code, and interactive examples. You can also write a design doc with usage rules and examples for your team and the agent.

Open Components under Project in the left sidebar
Click on a component

Exporting components to code

The Sync component card in the Export tab with the npx @subframe/cli@latest sync command and a copy button

Click the Export tab at the top of the Inspector panel
Copy and paste the npx @subframe/cli@latest command

For more information, see syncing components.

Importing from another project

Copy components and pages from one of your other Subframe projects into the current one. Each selection brings along the dependencies it needs to render — nested components, theme tokens, fonts, custom icons, and image assets.

Open Components under Project in the left sidebar
Click Import (top right) and select Copy from existing project…
Pick the source project from the dropdown
Browse or search the source project’s components and pages — click any item to preview it on the right
Check the box on each item you want, then click Copy

Copied components join your component library. Copied pages land on your project’s first canvas.

Components that already exist in the current project don’t appear in the picker.

Design

Browser

Agent

Building from scratch

Admin and billing

Importing components

Creating components using AI

Creating components from scratch

Creating components from existing designs

Editing components

Adding component instances

Detaching component instances

Deleting components

Resetting components

Organizing components into folders

Sorting components

Viewing component docs

Exporting components to code

Importing from another project

​Importing components

​Creating components using AI

​Creating components from scratch

​Creating components from existing designs

​Editing components

​Adding component instances

​Detaching component instances

​Deleting components

​Resetting components

​Organizing components into folders

​Sorting components

​Viewing component docs

​Exporting components to code

​Importing from another project

Importing components

Creating components using AI

Creating components from scratch

Creating components from existing designs

Editing components

Adding component instances

Detaching component instances

Deleting components

Resetting components

Organizing components into folders

Sorting components

Viewing component docs

Exporting components to code

Importing from another project