shadcn/ui Style Grab

Tracking since Apr 14, 2026.

Changelog

• Apr 26, 2026
  description

  shadcn/ui Style Grab — Extract & Map Website Designs to shadcn/ui Presets
  
  See a website with a design you love? Grab its style in one click.
  
  HOW IT WORKS
  1. Visit any website
  2. Click the extension icon
  3. Click "Grab Style from This Page"
  4. AI analyzes the site's colors, fonts, spacing, and visual style
  5. Opens ui.shadcn.com/create with your mapped theme preset
  
  WHAT IT EXTRACTS
  - Colors weighted by prominence (button backgrounds, accent colors, link colors)
  - Font families mapped to shadcn/ui's font library (150+ font mappings)
  - Border radius mapped to shadcn/ui's radius scale
  - Overall visual style mapped to the closest preset (nova, vega, maia, lyra, mira, luma)
  - Background tone mapped to base color (neutral, stone, zinc, gray, mauve, olive, mist, taupe)
  
  MULTI-AGENT AI ANALYSIS
  Five AI models analyze your page's CSS in parallel, then a unifier model synthesizes the best result using visual analysis. This produces more accurate mappings than any single model.
  
  FEATURES
  - One-click extraction from any website
  - Parallel multi-agent AI for accuracy
  - Deterministic font matching to shadcn/ui's 24 fonts
  - Smart component style extraction (buttons, headings, cards, inputs)
  - Extraction history with thumbnails
  - Copy preset code or open directly in shadcn/ui
  - Configurable settings
  - Dark UI matching shadcn/ui aesthetic
  
  PRIVACY
  - No data collected unless you click "Grab Style"
  - No analytics or tracking
  - All history stored locally on your device
  - CSS data processed transiently, never stored server-side
  - Full privacy policy: https://palette.site/privacy
  
  Made by Palette.site

  See a design you like? Grab its style in one click. The extension analyzes the live page with AI and hands you a ready-to-paste shadcn/ui preset — colors, fonts, border radius, and base tone all mapped to the shadcn design system.
  
  HOW IT WORKS
  1. Open any website with a design you like.
  2. Click the extension icon.
  3. Click "Grab Style from This Page".
  4. The extension reads the page's computed CSS and a screenshot, then maps them to shadcn/ui values.
  5. A new tab opens at ui.shadcn.com/create with the preset loaded. You can also copy the preset code to your clipboard.
  
  No signup. No account. No credit card.
  
  WHAT GETS EXTRACTED
  - Colors weighted by visual prominence: button fills, accent colors, link colors, and surface tones.
  - Font families matched to the fonts available in shadcn/ui.
  - Border radius mapped to the shadcn radius scale.
  - Overall visual style mapped to the closest shadcn preset.
  - Background tone mapped to the closest shadcn base color.
  - Component hints taken from real buttons, headings, cards, and inputs on the page.
  
  HOW THE MAPPING WORKS
  The extension sends the extracted CSS and screenshot to an AI service via a dedicated Cloudflare Worker proxy. Several AI models analyze the page in parallel, then a final model combines the candidates using the screenshot as visual reference. This improves accuracy on complex pages with many competing colors.
  
  FEATURES
  - One-click extraction from any website.
  - Deterministic font matching to the shadcn/ui font library.
  - Component style extraction for buttons, headings, cards, and inputs.
  - Local extraction history with page thumbnails so you can revisit past results.
  - Copy preset code to your clipboard or open it directly in ui.shadcn.com/create.
  - Configurable proxy URL and screenshot quality in the options page.
  - Dark interface that matches the shadcn/ui aesthetic.
  
  PRIVACY
  - No data is collected unless you explicitly click "Grab Style from This Page".
  - No analytics, no tracking.
  - Your extraction history is stored locally on your device via chrome.storage.
  - CSS and screenshot data pass through our Cloudflare Worker proxy to the AI service for processing, then are discarded. Nothing is stored on our servers.
  - Full privacy policy: https://palette.site/privacy
  
  FAQ
  Q: Is it free?
  A: Yes. A paid tier may arrive later for heavier workflows.
  
  Q: Do I need an API key?
  A: No. The AI runs through our proxy.
  
  Q: Does the output match the source site pixel-for-pixel?
  A: No. The extension maps the source to the closest shadcn/ui preset. You get a real shadcn theme inspired by the source, not an exact copy.
  
  Q: Can I use the generated preset commercially?
  A: Yes. The shadcn/ui project itself is MIT-licensed.
  
  Q: Does it work on paywalled or logged-in pages?
  A: Yes. As long as the page is visible in your browser, the extension can read its CSS.
  
  Made by Palette.site

Permissions & access

Permissions

activeTabstoragetabsscripting

Host access

https://shadcn-style-proxy.stas6236.workers.dev/*, https://ui.shadcn.com/*

Screenshots