Быстрый старт

Реестр подключается один раз в components.json продукта:

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

База (токены, base.css, мост в Tailwind), слой продукта (акцент) и правила проверки. Для портфолио вместо theme-shadenotes ставится theme-portfolio, для нового продукта свой слой по образцу (страница «Темы продуктов»)

Tailwind 4, в 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")] в tailwind.config.js, в глобальном CSS tokens.css, product.css, base.css перед @tailwind base. Подробно на странице «Темы продуктов»

Файлы ложатся в components/umbra/ и не перезаписывают компоненты shadcn продукта (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>

Линт: в eslint.config.mjs продукта ...umbra.configs.recommended из ./eslint.umbra.mjs (сырые цвета, отступы вне шкалы, чужие иконки, стрелки, стекло у плитки). Дальше tsc --noEmit, сборка и скриншоты экрана в 1100 × 700 в обеих темах. Пары текст / фон брать только из таблицы на странице «Цвета и контраст»