Tools
shadcn/ui theme from any website
Enter a website address and get its design as the CSS variables shadcn/ui reads: background, foreground, primary, secondary, muted, accent, border, ring and radius.
linear.app
Measured 4 days ago.
/* shadcn/ui theme measured from linear.app. Values are hex; shadcn's CSS accepts them as they are. */
:root {
--background: #08090a;
--foreground: #f7f8f8;
--card: #101112;
--card-foreground: #f7f8f8;
--popover: #101112;
--popover-foreground: #f7f8f8;
--primary: #e5e5e6;
--primary-foreground: #111111;
--secondary: #1c1d1e;
--secondary-foreground: #f7f8f8;
--muted: #101112;
--muted-foreground: #8a8f98;
--accent: #5e6ad2;
--accent-foreground: #111111;
--border: #1c1d1e;
--input: #1c1d1e;
--ring: #e5e5e6;
--radius: 9999px;
}
.dark {
--background: #08090a;
--foreground: #f7f8f8;
--card: #101112;
--muted: #101112;
--muted-foreground: #8a8f98;
--border: #1c1d1e;
--input: #1c1d1e;
}How it works
Stylepack opens the site in a real browser, measures what renders (not what the stylesheet says) at four widths and in both themes, and stores the result as a design pack. A site already measured answers at once; a new one takes under a minute. Every value on this page comes from that pack.
Questions
How are the shadcn variables filled?
Each measured color has a role (background, foreground, primary, on-primary, surface, muted-foreground, border); the variables are filled from those roles, with the accent as --primary and --ring and the button radius as --radius.
Do I need to convert the values?
No. shadcn/ui's CSS accepts hex values as they are. If your setup uses oklch or hsl, convert them with your usual tool or keep the hex.
What about the dark theme?
When the site has a dark theme, the result adds a .dark block with the measured dark values for background, foreground, surfaces and borders.