shads.app Live Preview

Sync themes from shads.app and preview them on any shadcn-compatible site.

Preview your shads.app theme on real shadcn/ui sites before you merge CSS into your project. Build a theme at shads.app, sync it to this extension, then apply it on any shadcn-compatible page — your local app, a staging deploy, or ui.shadcn.com/create. See colors, typography, spacing, and surfaces in context instead of guessing from the builder alone. WHAT IT DOES • One-click sync from shads.app (Pro) • Apply the synced theme to the current tab from the extension popup • Works on shadcn apps that use semantic CSS variables (--primary, --background, --card, etc.) • Handles ui.shadcn.com/create preview iframes automatically • Same live-preview engine as the shads.app bookmarklet — without copy-paste HOW TO USE 1. Sign in to shads.app with a Pro plan 2. Customize your theme in the builder 3. Open the ⋯ menu → Chrome extension (beta) → Sync current theme 4. Open your target shadcn app (e.g. ui.shadcn.com/create) 5. Click this extension → Apply to this tab This is a preview tool. It injects CSS for the current session so you can evaluate the theme. For production, export CSS from shads.app and add it to your project. REQUIRES • A shads.app account with Pro (for theme sync) • A shadcn-compatible site that uses CSS variables PRIVACY • Theme CSS is stored locally in the extension after you sync • CSS is only injected when you click Apply — not automatically on every page • No analytics or tracking in the extension • Privacy policy: https://shads.app/privacy SUPPORT https://shads.app