1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Начало работы

Руководство по установке

Добавьте бесплатные и доступные 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-ui
bash
yarn add react-component-kit-ui
bash
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'
Все компонентыКомпоненты →
Все секцииСекции →

Готовы к разработке?

Изучите каталог компонентов и используйте их в своих проектах прямо сейчас.