Componentes React tipados, acessíveis e com dark mode nativo.

Instalação

npm install @pine-ui/react @pine-ui/tokens
# ou
pnpm add @pine-ui/react @pine-ui/tokens

Adicione os tokens CSS no root do projeto:

// app/layout.tsx (Next.js) ou main.tsx (Vite)
import '@pine-ui/tokens/css'

Componentes

Button

import { Button } from '@pine-ui/react'

// Variantes
<Button variant="primary">Salvar</Button>
<Button variant="secondary">Cancelar</Button>
<Button variant="ghost">Ver mais</Button>
<Button variant="danger">Excluir</Button>
<Button variant="link">Saiba mais</Button>

// Tamanhos
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>   {/* padrão */}
<Button size="large">Large</Button>

// Estados
<Button loading>Salvando...</Button>
<Button disabled>Indisponível</Button>
<Button fullWidth>Criar conta gratuita</Button>

// Com ícones
<Button leftIcon={<PlusIcon />}>Novo projeto</Button>
<Button rightIcon={<ArrowIcon />}>Continuar</Button>

Props

| Prop | Tipo | Padrão | Descrição | |---|---|---|---| | variant | primary | secondary | ghost | danger | link | primary | Estilo visual | | size | xs | sm | md | lg | xl | md | Tamanho | | loading | boolean | false | Exibe spinner e desabilita | | disabled | boolean | false | Desabilita o botão | | fullWidth | boolean | false | Ocupa 100% da largura | | leftIcon | ReactNode | — | Ícone à esquerda | | rightIcon | ReactNode | — | Ícone à direita |

Aceita todos os atributos nativos do <button> HTML.

Dark Mode

Pine UI usa [data-theme="dark"] no elemento raiz — zero JavaScript no runtime:

// toggle manual
document.documentElement.setAttribute('data-theme', 'dark')

// com next-themes
import { ThemeProvider } from 'next-themes'

<ThemeProvider attribute="data-theme">
  {children}
</ThemeProvider>

Tokens CSS

Os componentes usam CSS Variables do @pine-ui/tokens. Você pode sobrescrever qualquer token no seu projeto:

:root {
  --color-brand:       #seu-verde;
  --color-brand-hover: #seu-verde-hover;
  --radius-md:         0.75rem;
}

Pacotes relacionados

| Pacote | Descrição | |---|---| | @pine-ui/tokens | Design tokens — cores, tipografia, espaçamentos |

Contribuindo

git clone https://github.com/jhonathanpinheiro/pine-ui
cd pine-ui
pnpm install
pnpm run storybook  # localhost:6006

Feito por Jhonathan Pinheiro · MIT License