Skip to main content

Using Live Preview

Picking a template​

Click the Components dropdown in the preview panel's top bar to switch templates.

Which one to use depends on what you're checking:

  • Reviewing your color palette? Components shows buttons, badges, and form fields together
  • Checking font choices and readability? Blog is the one to use
  • Looking at spacing and density? Try Dashboard

Responsive view​

The preview toolbar has a desktop icon you can toggle to check how things look at different viewport widths.

Editing and watching it update​

The editor and preview are side by side. Open a group, change a token value, and the preview updates. It's genuinely useful when you're tuning values in the Design Guides. Drag the spacing slider and watch the gaps between components adjust in real time. Much faster feedback than exporting and checking in a browser.

Previewing a different theme​

The preview uses whatever context is active in the left sidebar. To check your dark theme, click the Theme dropdown in the CONTEXT section and switch to it. The preview updates right away. Switch back to default to compare.