Components are reusable building blocks for your UI. In addition to the included design system components you can create your own custom components that are shared across both design & code.
🛠️ Whenever you create new components, run the CLI command to sync your changes with your codebase.
Create a component
You can create a component from any existing element, or build one from scratch.
Create from an existing design
Select the layers to include in your component.
Right-click on your selection.
Click
Create component in the dropdown menu.Name your component and select any suggested properties to include.
Subframe will open the component editor, where you can further edit your component.
Create from scratch
Go to your component library.
Click + New component.
Subframe will create a new blank component and open te
Component properties
Just like in code, components use properties to display different data when you use them. Defining properties lets you:
Change icon, text, or images
Create variants of a component
Add custom elements with slots
Suggested properties
When you create a component from existing layers, Subframe will suggest properties for the component to get you started. You'll be able to modify this later.
Rename the property using the text field (e.g. image, text)
Remove properties you don't need using the toggle switch
Interaction states
You can easily add interactive states to any component, including:
Hover
Pressed
Focused