@nenui/core

Современная библиотека UI компонентов для React с поддержкой OKLCH цветов и динамической тематизации

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

# Установка главного пакета (включает все компоненты)
npm install @nenui/core
# или
bun add @nenui/core

import { ThemeProvider, Button } from '@nenui/core';
import '@nenui/core/styles.css';

function App() {
  return (
    <ThemeProvider>
      <Button variant="primary">Нажми меня!</Button>
    </ThemeProvider>
  );
}

Что включено

При установке @nenui/core автоматически подтягиваются все дочерние пакеты:

• @nenui/common - утилиты, типы и контекст темы
• @nenui/hooks - React хуки для работы с цветами
• @nenui/ui - UI компоненты

Особенности

🎨 OKLCH цвета - современная цветовая модель для точной работы с цветом

🎯 Динамическая тематизация - изменяйте цвета в реальном времени

📦 Модульность - используйте только то, что нужно

🛠 TypeScript - полная поддержка типов

Документация

• 📚 Полная документация
• 📖 Storybook

Примеры

Динамические цвета

import { ThemeProvider, HueSelector, useTheme, Button } from '@nenui/core';

function ThemeCustomizer() {
  const { theme, setHue } = useTheme();
  
  return (
    <div>
      <HueSelector
        value={theme.primaryHue}
        onChange={(hue) => setHue('primary', hue)}
        label="Основной цвет"
      />
      <Button variant="primary">Кнопка с динамическим цветом</Button>
    </div>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemeCustomizer />
    </ThemeProvider>
  );
}

Компоненты

• Button - кнопка с различными вариантами
• HueSelector - селектор оттенка для OKLCH цветов
• И другие (в разработке)

Хуки

• useTheme - доступ к глобальной теме
• useColorPicker - управление OKLCH цветом (L, C, H)
• useHueSelector - управление оттенком (H)

Лицензия

MIT © [Your Name]