Руководство по установке
Добавьте бесплатные и доступные UI-компоненты в ваш проект React менее чем за 2 минуты. Без зависимостей, с полной типизацией. Лицензия MIT — бесплатно навсегда.
Шаг 1
Требования
Вам потребуется проект на React 18 или 19. Если его еще нет, создайте новый:
bash
# 1. Create a React project (Vite + TypeScript)
npm create vite@latest my-app -- --template react-ts
# 2. Navigate into the project
cd my-app
# 3. Install the component library
npm install react-component-kit-ui
# 4. Start the dev server
npm run devТребуется Node.js 20+. Проверьте командой
node --version.Шаг 2
Установка библиотеки
Выберите удобный пакетный менеджер:
bash
npm install react-component-kit-uibash
yarn add react-component-kit-uibash
pnpm add react-component-kit-uiШаг 3 Обязательно
Импорт стилей
Компоненты используют обычный CSS. Импортируйте дизайн-токены и стили компонентов один раз в корне приложения:
tsx
// main.tsx (Vite) or app/layout.tsx (Next.js) — once per app
import 'react-component-kit-ui/global.css'; // design tokens, reset and fonts
import 'react-component-kit-ui/styles.css'; // component stylesШаг 4
Импорт и использование компонентов
Доступны два стиля импорта — корневой или по категориям (рекомендуется для минимального бандла):
Вариант А: Корневой импорт (быстро)
tsx
// Import components from the package root
import { GlassButton, GlassAlert, Badge } from 'react-component-kit-ui';
export function App() {
return (
<GlassAlert type="success" title="Welcome">
<GlassButton>Click me</GlassButton> <Badge variant="info">New</Badge>
</GlassAlert>
);
}Вариант Б: Импорт по категориям (рекомендуется)
tsx
// Import by category (recommended for smaller bundles)
import { GlassButton, GlowButton, LoadingButton } from 'react-component-kit-ui/buttons';
import { GlassAlert, GlassModal, Badge } from 'react-component-kit-ui/feedback';Используете App Router в Next.js? Все компоненты уже содержат "use client", их можно импортировать из серверных компонентов.
Быстрая справка
| Задача | Команда / Импорт |
|---|---|
| Установка библиотеки | npm install react-component-kit-ui |
| Импорт дизайн-токенов | import 'react-component-kit-ui/global.css' |
| Импорт стилей компонентов | import 'react-component-kit-ui/styles.css' |
| Все компоненты | Компоненты → |
| Все секции | Секции → |
Готовы к разработке?
Изучите каталог компонентов и используйте их в своих проектах прямо сейчас.