Quick start

Add the registry once in your product’s components.json:

{
  "registries": {
    "@umbra": "https://aid-design-lovat.vercel.app/r/{name}.json"
  }
}

The base (tokens, base.css, the Tailwind bridge), the product layer (accent) and the lint rules. For the portfolio, install theme-portfolio instead of theme-shadenotes; a new product makes its own layer from the same pattern (see “Product themes”)

Tailwind 4, in app/globals.css:

@import "tailwindcss";
@import "../styles/umbra/tokens.css";
@import "../styles/umbra/product.css";
@import "../styles/umbra/tailwind-v4.css";
@import "../styles/umbra/base.css";

Tailwind 3.4: presets: [require("./styles/umbra/tailwind-v3-preset.cjs")] in tailwind.config.js, and tokens.css, product.css, base.css in the global CSS before @tailwind base. Details in “Product themes”

Files land in components/umbra/ and don’t overwrite the product’s shadcn components (components/ui/):

import { Tile } from "@/components/umbra/tile";
import { Button } from "@/components/umbra/button";

<Tile>
  <p className="text-title">Встречи</p>
  <Button className="mt-4">Начать запись</Button>
</Tile>

Lint: in the product’s eslint.config.mjs, spread ...umbra.configs.recommended from ./eslint.umbra.mjs (raw colors, off-scale spacing, foreign icons, arrows, glass on a tile). Then tsc --noEmit, the build and screenshots of the screen at 1100 × 700 in both themes. Take text / background pairs only from the table in “Color and contrast”