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.

​

Creating components from scratch

1. Navigate to Components in navbar
2. Click New component
3. Choose one of:
   • Remix an existing prebuilt component
   • Create from scratch

​

Creating components from existing designs

You can create components directly from elements on a page:

1. Right-click or press / to open quick actions
2. Select Create component
3. Name your component
4. Review AI-suggested properties
5. Click Create

Subframe AI will auto-suggest properties using best practices based on what you have selected.

​

Editing components

To edit a component you can either:

• navigate to Components, click on the component, click on Edit component button
• Right-click or press / to open quick actions, select Edit component

Any changes you make in the editor will update all component instances.

​

Adding component instances

You can add a component instance by

1. Open the quick insert menu
2. 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.

1. Right-click or press / to open quick actions
2. Select Detach component

​

Component docs

We auto-generate component docs with properties and sometimes examples, similar to Storybook. Any updates you make will automatically update the docs. You can directly edit the component from these docs or send them to a developer. To view them, navigate to Components, click on the component.

​

Exporting components to code

1. Click Code
2. Select Inspect
3. Copy and paste the npx @subframe/cli command

For more information, see syncing components.

​

Importing from another project

1. Go to Components
2. Click Import from… button
3. Select Another project