Tip: Working with a developer? Invite them to your team to share your work and build your UI.
Subframe generates React + Tailwind CSS code for your designs. You can sync your project theme and components, then copy & paste page designs into your codebase so you can refactor and add business logic as needed – knowing your UI remains pixel-perfect.
1. Sync your project using the CLI
Note: Make sure to sync after making changes to your theme or components.
Before you open the page editor, click Sync code in the top-right of the nav.
Copy & paste your unique sync command snippet and run it in your CLI.
2. Copy & paste page code
Open the page editor.
Select Code in the top-right of the nav to open the code panel.
By default, the code panel will show the code for the entire page. You can select individual elements on the page to see a code snippet for your selection.
The code panel will show the following for each page or selection:
Snippet to install/sync components.
List of imports.
Generated React + Tailwind CSS code.
Copy & paste the code to your code editor.
Tip: Expand the code panel by clicking the << icon.
3. Add your business logic
Most users from here begin to refactor the code, add custom business logic, and hooking it up to their APIs. This code is all yours to customize!
All components expose React DOM props like onClick and className. Some components like Accordion have special props related to its internal business logic.
Learn more about component docs.