Theme · Geist
Vercel theme for shadcn/ui
A theme in the style of Vercel: black and white with neutral greys, Geist type, tight 6px corners, and blue reserved for focus and links. Primary buttons are solid black in light mode and white in dark.
Font: Geist, Vercel's own open-source face.
Preview
Workspace · 02
Invite your team
Teammates get access to every project.
Storage 64%
LiveHealthyv1.0
Workspace · 02
Invite your team
Teammates get access to every project.
Storage 64%
LiveHealthyv1.0
Install
With the shadcn CLI. It writes the light and dark tokens into your global CSS (and the Cuelark utilities if you don't have them yet).
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/theme-vercel.jsonOr paste the CSS after your Tailwind import. The variable names are the standard shadcn/ui ones, so it themes any shadcn project.
:root {
--background: #fafafa;
--foreground: #171717;
--card: #ffffff;
--card-foreground: #171717;
--popover: #ffffff;
--popover-foreground: #171717;
--primary: #171717;
--primary-foreground: #ffffff;
--secondary: #f2f2f2;
--secondary-foreground: #171717;
--muted: #f2f2f2;
--muted-foreground: #666666;
--accent: #ebebeb;
--accent-foreground: #171717;
--border: #ebebeb;
--input: #e0e0e0;
--ring: #006bff;
--signal: #006bff;
--signal-foreground: #ffffff;
--cl-mark: #c9c9c9;
--cl-shade: rgb(0 0 0 / 0.08);
--cl-font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
--cl-text-size: 1;
--cl-tracking: -0.01em;
--radius: 0.375rem;
--cl-density: 1;
--cl-marks: 0;
--cl-motion: 1;
}
.dark {
--background: #0a0a0a;
--foreground: #ededed;
--card: #111111;
--card-foreground: #ededed;
--popover: #1a1a1a;
--popover-foreground: #ededed;
--primary: #ededed;
--primary-foreground: #0a0a0a;
--secondary: #1f1f1f;
--secondary-foreground: #ededed;
--muted: #1a1a1a;
--muted-foreground: #a1a1a1;
--accent: #232323;
--accent-foreground: #ededed;
--border: #2e2e2e;
--input: #3d3d3d;
--ring: #47a8ff;
--signal: #47a8ff;
--signal-foreground: #0a0a0a;
--cl-mark: #454545;
--cl-shade: rgb(0 0 0 / 0.5);
}Tokens
| Token | Used for | Light | Dark |
|---|---|---|---|
| --background | Page | ||
| --foreground | Text | ||
| --card | Cards | ||
| --muted | Panels, wells | ||
| --muted-foreground | Secondary text | ||
| --primary | Primary buttons | ||
| --primary-foreground | Text on primary | ||
| --secondary | Secondary buttons | ||
| --accent | Hover, selection | ||
| --border | Borders | ||
| --input | Input borders | ||
| --ring | Focus ring | ||
| --signal | Accent: checked, live, highlights |