Разработка с denjs/ui

denjs/ui — типизированный пакет React-компонентов для практичных продуктовых интерфейсов. Установите его как зависимость и используйте компоненты прямо в приложении.

React 18 или 19

Готово для TypeScript

ES-модули

Установка

Добавьте пакет с помощью удобного npm-совместимого менеджера.

npm install denjs-ui

Тема

Подключите Tailwind CSS, а затем файл стилей denjs-ui в глобальном CSS-файле приложения. Порядок импортов важен: библиотека регистрирует собранные компоненты как источник Tailwind и добавляет семантические токены темы.

@import "tailwindcss";
@import "denjs-ui/styles.css";

Без атрибута data-theme тема следует системным настройкам. Установите data-theme="light" или data-theme="dark" на корневом элементе, чтобы выбрать тему явно.

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

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

import { Badge, Button } from "denjs-ui";
import { Dot } from "lucide-react";

export function Actions() {
  return (
    <div>
      <Badge
        className="bg-emerald-50 text-emerald-700"
        icon={<Dot strokeWidth={8} />}
        iconClassName="text-emerald-500"
      >
        Ready
      </Badge>
      <Button size="sm">Publish</Button>
    </div>
  );
}

Смотреть все компоненты