Theme · Inter
Linear theme for shadcn/ui
A theme in the style of Linear: near-white surfaces in light mode and near-black in dark, hairline borders, quiet grey text, and a single indigo accent for primary actions and focus. Inter at Linear's 510 and 590 weights, 8px corners, almost no shadow.
Font: Inter, the face Linear uses, at weights 510 and 590.
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-linear.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: #f9f8f9;
--foreground: #282a30;
--card: #ffffff;
--card-foreground: #282a30;
--popover: #ffffff;
--popover-foreground: #282a30;
--primary: #5e6ad2;
--primary-foreground: #ffffff;
--secondary: #f1f0f2;
--secondary-foreground: #282a30;
--muted: #f1f0f2;
--muted-foreground: #6f6e77;
--accent: #eeedef;
--accent-foreground: #282a30;
--border: #e9e8ea;
--input: #dcdbdd;
--ring: #7170ff;
--signal: #5e6ad2;
--signal-foreground: #ffffff;
--cl-mark: #d4d4d6;
--cl-shade: rgb(0 0 0 / 0.07);
--cl-font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
--cl-text-size: 1;
--cl-tracking: -0.006em;
--radius: 0.5rem;
--cl-density: 1;
--cl-marks: 0;
--cl-motion: 1;
--font-weight-medium: 510;
--font-weight-semibold: 590;
}
.dark {
--background: #08090a;
--foreground: #f7f8f8;
--card: #0f1011;
--card-foreground: #f7f8f8;
--popover: #141516;
--popover-foreground: #f7f8f8;
--primary: #5e6ad2;
--primary-foreground: #ffffff;
--secondary: #1c1c1f;
--secondary-foreground: #f7f8f8;
--muted: #1c1c1f;
--muted-foreground: #8a8f98;
--accent: #232326;
--accent-foreground: #f7f8f8;
--border: #23252a;
--input: #34343a;
--ring: #7170ff;
--signal: #7170ff;
--signal-foreground: #ffffff;
--cl-mark: #3e3e44;
--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 |