Начало работы · Установка

Установка

Brock UI использует формат shadcn registry: компоненты копируются прямо в ваш проект – код принадлежит вам. Никакой runtime-зависимости от пакета Brock UI.

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

Любой компонент добавляется в проект одной командой:

npx shadcn@latest add https://brockui.com/r/column-chart

Требования

· Next.js 16+ (или React 19+ для других фреймворков)
· Tailwind CSS v4
· shadcn CLI: npm i -D shadcn
· Настроенный components.json (если его нет – выполните npx shadcn init)

Настройка темы

Добавьте акцентный цвет Brock UI в globals.css. Без него компоненты рендерятся в нейтральном сером.

:root {
  --brock-accent: oklch(0.646 0.222 41.116); /* #F54900 — Orange */
}

.dark {
  --brock-accent: oklch(0.646 0.222 41.116);
}

Токен Tailwind v4

Откройте переменную как Tailwind-токен, чтобы использовать bg-brock-accent, text-brock-accent и border-brock-accent по всему проекту. Добавьте внутрь блока @theme inline:

@theme inline {
  --color-brock-accent: var(--brock-accent);
}

Свой акцентный цвет

Одна переменная управляет акцентами во всех компонентах Brock UI. Поменяйте --brock-accent один раз – обновится каждый график, каждое выделение, каждое активное состояние. Рекомендуем один выразительный цвет в OKLCH: он предсказуемо ведёт себя в обеих темах.

Что вы получаете

· Исходники в вашем репозитории – правьте свободно, никакого «чёрного ящика»
· Типизированные пропы, ноль runtime-зависимостей кроме React и Tailwind
· Тёмная и светлая темы наравне из коробки
· Лицензия MIT, атрибуция не требуется