webkoth.comUI Kit
shadcn registry · base-vega · Tailwind v4

Webkoth UI Kit

Живая витрина моей темы и компонентов. Переключай тему (☀/🌙) и палитру (тёплая/классическая) в шапке — всё перекрашивается через OKLCH-токены. Любой агент может забрать это по одной ссылке (см. «Установка» внизу).

Цвета

OKLCH-токены темы. Реагируют на light/dark и переключатель палитры.

background
foreground
card
primary
secondary
muted
accent
destructive
chart-1
chart-2
chart-3
chart-4
chart-5

Радиусы

Шкала, выведенная из --radius: 0.625rem.

sm
md
lg
xl
2xl
3xl
4xl

Типографика

Geist Sans / Geist Mono.

Заголовок H1

Заголовок H2

Заголовок H3

Обычный абзац. The quick brown fox jumps over the lazy dog. 0123456789.

Приглушённый текст (muted-foreground) для подписей и пояснений.

const mono = "Geist Mono"

Кнопки

Варианты и размеры.

Бейджи

DefaultSecondaryDestructiveOutline

Поля ввода

Карточка

Тарифный план
Карточка на токенах темы.
Pro
Кольцо, фон и текст берутся из --card / --border / --foreground.

Tabs и Accordion

Содержимое вкладки «Обзор».

Tooltip и Avatar

MSAvatar fallback

Мои компоненты

То, чего нет в базовом shadcn — публикуется в реестре.

Magnetic
Магнитится к курсору на hover.
AnimatedMetric
Счётчик при появлении в зоне видимости.
0%
Lighthouse
0ms
TTFB
0+
Проектов
ModeToggle / PaletteToggle
Те же, что в шапке.
LanguageToggle
EN/RU сегмент для /[lang] роутов.
ENRU

Установка

Дай агенту эти команды (или просто ссылку на реестр).

Всё сразу (тема + все компоненты)
npx shadcn@latest add https://webkoth.com/r/webkoth-ui.json
Только тема
npx shadcn@latest add https://webkoth.com/r/theme.json
Отдельный компонент (пример)
npx shadcn@latest add https://webkoth.com/r/magnetic.json
Инструкция для ИИ-агента (правила + ссылки)
https://webkoth.com/ui-kit.txt