@ai-sber/uikit
v0.1.7
Published
UI component library for ecosystem — React, TypeScript, Tailwind CSS, dark mode
Maintainers
eoekimReadme
@ai-sber/uikit
Библиотека UI-компонентов на React, Radix UI, TypeScript и Tailwind CSS с поддержкой тёмной темы.
Установка
npm install @ai-sber/uikitPeer-зависимости (установите, если ещё не добавлены):
npm install react react-dom dayjs lucide-react @radix-ui/react-popoverПодключение стилей
Импортируйте стили один раз в точке входа приложения:
import '@ai-sber/uikit/styles';Использование
import { useState } from 'react';
import { Button, Input, Modal, ModalTrigger, ModalContent, ModalHeader, ModalTitle, ModalBody } from '@ai-sber/uikit';
import '@ai-sber/uikit/styles';
export function App() {
const [value, setValue] = useState('');
return (
<Modal>
<ModalTrigger asChild>
<Button>Открыть форму</Button>
</ModalTrigger>
<ModalContent>
<ModalHeader>
<ModalTitle>Заголовок</ModalTitle>
</ModalHeader>
<ModalBody>
<Input value={value} onChange={(e) => setValue(e.target.value)} placeholder="Введите текст" />
</ModalBody>
</ModalContent>
</Modal>
);
}Компоненты
Buttons
Button IconButton Checkbox Switch RadioGroup Rating ColorSwatch
Inputs
Input Textarea Select SearchInput OTPInput QuantitySelector Label
DataDisplay
Avatar Card Table DataTable Carousel ImageGallery MediaCard Logo SpecsTable OptimizedImage EmptyState
DatePicker
DatePicker RangePicker TimePicker Calendar
Feedback
Alert Badge Tag Progress CircularProgress Skeleton StatusIndicator
Navigation
Tabs Accordion Breadcrumb Pagination Stepper
Overlay
Modal Drawer DropdownMenu Popover Tooltip
Marketing
AuthCard PromoBanner FeatureCard Newsletter CookieBanner CountdownTimer
Commerce
PriceTag
Тёмная тема
Компоненты реагируют на класс dark на элементе <html>:
// Ручное переключение
document.documentElement.classList.toggle('dark');// next-themes
import { ThemeProvider } from 'next-themes';
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>Кастомизация
CSS-переменные
Переопределите дизайн-токены для изменения цветовой схемы:
:root {
--sberai-color-interactive-default: #515dad;
--sberai-color-interactive-hovered: #4752a0;
--sberai-color-interactive-pressed: #3a4490;
--sberai-color-border-focused: #515dad;
}Tailwind CSS 4
CSS-first preset подключает токены и регистрирует semantic utilities:
@import "tailwindcss";
@import "@ai-sber/uikit/tailwind.css";После этого доступны, например, bg-surface, text-content-subtle, bg-primary-500, rounded-button, shadow-dropdown и z-modal.
Tailwind config preset
Для проектов с tailwind.config.js импортируйте ESM preset:
import sberPreset from '@ai-sber/uikit/tailwind-preset';
export default {
presets: [sberPreset],
content: [
'./src/**/*.{ts,tsx}',
'./node_modules/@ai-sber/uikit/dist/**/*.js',
],
};Для CommonJS используется тот же export: require('@ai-sber/uikit/tailwind-preset'). CSS-переменные должны быть загружены через @ai-sber/uikit/styles.css или @ai-sber/uikit/tokens.css.
Слоты компонентов
Компоненты поддерживают кастомизацию через пропсы className, classNames (по слотам) и styles (CSSProperties по слотам). Проп unstyled полностью сбрасывает встроенные стили.
TypeScript
Все компоненты типизированы. Типы экспортируются рядом с компонентами:
import type { ButtonProps, InputProps, ModalContentProps } from '@ai-sber/uikit';Сборка
npm run build # tsc + vite build
npm run type-check # проверка типов без эмиссии
npm run lint # eslint
npm run format # prettier