Kitsune UI

React UI библиотека компонентов с Tailwind CSS.

Установка

npm install kitsune-ui

Настройка Tailwind CSS

Автоматическая настройка:

npx kitsune-ui init

Или вручную:

Tailwind v4 — добавьте в CSS файл:

@import "tailwindcss";
@source "../node_modules/kitsune-ui";

Tailwind v3 — добавьте в tailwind.config.js:

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/kitsune-ui/**/*.js',
  ],
}

Использование

import { Button, IconHeart } from 'kitsune-ui';

function App() {
  return (
    <Button color="primary" leftIcon={<IconHeart size="sm" />}>
      Like
    </Button>
  );
}

Компоненты

Button

import { Button } from 'kitsune-ui';

<Button
  variant="solid" // 'solid' | 'outline' | 'ghost' | 'link'
  size="md"       // 'sm' | 'md' | 'lg'
  color="primary" // 'default' | 'primary' | 'success' | 'warning' | 'danger'
  isLoading={false}
  isDisabled={false}
  fullWidth={false}
  leftIcon={<Icon />}
  rightIcon={<Icon />}
>
  Click me
</Button>

Icons

60+ иконок в стиле Feather/Lucide:

import { IconHeart, IconStar, IconPlus } from 'kitsune-ui';

<IconHeart size="lg" color="#ef4444" />
<IconStar size={32} />
<IconPlus size="sm" />

Размеры: xs (12px), sm (16px), md (20px), lg (24px), xl (32px), или число

Доступные иконки:

• Навигация: IconArrowUp/Down/Left/Right, IconChevronUp/Down/Left/Right
• Действия: IconPlus, IconMinus, IconX, IconCheck, IconEdit, IconTrash, IconCopy, IconDownload, IconUpload, IconRefresh
• UI: IconSearch, IconFilter, IconMenu, IconSettings, IconMoreHorizontal/Vertical
• Пользователи: IconUser, IconUsers
• Статус: IconCheckCircle, IconXCircle, IconAlertCircle, IconAlertTriangle, IconInfo, IconHelpCircle
• И другие...

Лицензия

MIT