Extract any website's design and map it to a shadcn/ui theme preset. Made by Palette.site
Users
46
+3 in 30 days
Rating
5.0 / 5
unchanged in 30 days
Ratings
4
0 in 30 days
Store rank
#112K
#93K among extensions
Version
0.4.2
updated 27 Apr 2026
Users
monthly, 6 months
Latest, 16 Oct 2026:46 usersMove the mouse over the chart for any month
Ratings count
monthly, 6 months
Latest, 16 Oct 2026:4 ratingsMove the mouse over the chart for any month
The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.
About 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