shadcn/ui Style Grab

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