Build your entire product UI
in just minutes

Subframe lets you visually design your product UI and export it as React code. It's the design-to-code tool that's loved by engineers.

Revamped docs & interactive CLI

We are relaunching our docs and CLI so you can get to prod-ready code faster.

πŸ“– Docs now have copy & paste-able examples.

Integrating Subframe components just got a whole lot easier! We've rebuilt our documentation to be more developer-friendly. You can now see all the supported component props, including those from Radix.

We also included copyable usage examples for common scenarios. Just copy what you need and these code snippets will work in any codebase.

πŸ‘©β€πŸ’» Our CLI is now interactive!

Installing and syncing Subframe with your codebase is now a single command: npx @subframe/cli@latest. Our CLI tool will ask you a few questions, and then automatically set up your CSS configurations & NPM dependencies.

It even remembers your preferences and stores it in a special folder called .subframe so you never have to answer the same questions twice!

✨ Other improvements

  • Navigating back to your dashboard from the editor will now take you to the right tab (ie pages or components)
  • Text whitespace is now configurable, including adding ellipsis or multi-line text
  • Table cells now always align properly and will export to code using native HTML tags
  • Fixed bug where ToggleGroup component was exported with incorrect Typescript types

Keyboard shortcuts and new components!

Welcome to Subframe's first changelog! Let's get started πŸ‘‡

⌨️ Keyboard shortcuts

For all you Subframe power users out there – you can now find all of our keyboard shortcuts in our cheat sheet.

You can open it anytime by clicking on the keyboard icon on the top right of the navbar. Try it out and let us know what you think!

πŸ”₯ New components

You asked and we listened! We've added five new components that you can add to your design system:

  1. Dropdown Button β€” opens a dropdown menu on click, complete with keyboard shortcuts, focus management, etc
  2. Skeleton Text / Circle β€” a popular loading state for things like cards, rows in a table, etc
  3. Breadcrumb β€” use this to organize nested urls in your app
  4. Toggle Group β€” a group of buttons that individually toggle on/off
  5. Progress β€” show % completion of a task as a progress bar

You can always add these components by via your Dashboard > Components > New Component