Media
2 items
Description
Extract any website's design and map it to a shadcn/ui theme preset. 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