@andersonkaiti/uikit

Biblioteca de componentes React construída com Tailwind CSS e shadcn/ui, com tipos em TypeScript e suporte a tema claro e escuro.

Instalação

pnpm add @andersonkaiti/uikit

react e react-dom (16.8 ou mais novo) são peer dependencies.

Uso

Importe o CSS uma vez, na entrada da aplicação, e use os componentes:

import '@andersonkaiti/uikit/index.css'
import { Button } from '@andersonkaiti/uikit'

export function App() {
  return <Button>Hello, JStack!</Button>
}

O pacote declara sideEffects: false, então o bundler remove o que você não importar (tree shaking).

Componentes

O Button aceita as variantes default, outline, secondary, ghost, destructive e link, e os tamanhos default, xs, sm, lg, icon, icon-xs, icon-sm e icon-lg:

;<Button variant="outline" size="sm">
  Cancelar
</Button>

Tema

O tema escuro é ativado com a classe dark em um elemento pai, por exemplo <html class="dark">.

Se o seu app também usa Tailwind v4, importe o preset para ter os mesmos tokens do kit (cores, raios, fonte e a variante dark). No CSS do app:

@import "tailwindcss";
@import "@andersonkaiti/uikit/tailwind-preset";
@import "@andersonkaiti/uikit/index.css";

Pontos de entrada