For developers
Code checks (ESLint)
Umbra rules in ESLint: what they catch and how to add them
npx shadcn@latest add @umbra/eslintA single dependency-free file, eslint.umbra.mjs. An ESLint 9 flat config (also ESLint 8.57 with eslint.config.js)
| Rule | What it catches |
|---|---|
umbra/no-raw-color |
#fff, rgb(), bg-[#fff], text-zinc-500 in classes and style |
umbra/no-arbitrary-value |
p-[13px], rounded-[10px]; w-[var(--sidebar)] is allowed |
umbra/spacing-scale |
spacing off the 8 / 12 / 16 / 20 / 24 / 32 scale (p-7, gap-2.5) |
umbra/radius-scale |
rounded-lg, rounded and other radii off the scale |
umbra/no-opacity-modifier |
bg-primary/50: does not work with tokens in Tailwind 3.4 |
umbra/no-foreign-icons |
lucide-react, react-icons, @heroicons/react and others |
umbra/no-arrow-icons |
Phosphor Arrow* arrows and any *Arrow* (CloudArrowUp): direction only via a bold Caret* chevron |
umbra/glass-layer |
warning: backdrop-filter and glass on a tile, glass inside glass (classes umbra-glass*, glass*) |
umbra/phosphor-weight |
Phosphor without weight="fill", a filled Caret* chevron (triangle), banned *Circle, *Square |
When to use
In every product. For a gradual migration, rules can temporarily be set to warn for legacy folders
When not to use
Not needed in projects without a UI
This item has no live example: it installs files or rules. See the “Code” tab to set it up