Primeiros Passos
Instale os pacotes, configure o tema e renderize seu primeiro componente em minutos.
Instale os pacotes
Adicione os tokens e a biblioteca de componentes ao seu projeto.
npm install @ghiberti85/tokens @ghiberti85/uipnpm add @ghiberti85/tokens @ghiberti85/uiyarn add @ghiberti85/tokens @ghiberti85/uiImporte o CSS do design system
Importe um arquivo de design system na raiz da sua aplicação (ex: layout.tsx ou _app.tsx). Isso injeta todas as CSS custom properties na página.
// Import the design system CSS (pick one)
import '@ghiberti85/tokens/ds-editorial'
// import '@ghiberti85/tokens/ds-brutalist'
// import '@ghiberti85/tokens/ds-velvet'
// import '@ghiberti85/tokens/ds-clean'
// import '@ghiberti85/tokens/ds-onyx'Cada design system tem seu próprio arquivo CSS. Você pode carregar múltiplos sistemas e alternar entre eles em tempo de execução usando o atributo data-theme.
Aplique um tema no elemento HTML
Adicione data-theme na sua tag <html>. Todos os componentes leem os tokens desse escopo automaticamente.
<!-- Apply a theme and optional dark mode -->
<html data-theme="ds-editorial">
<!-- for dark mode: data-theme="ds-editorial" data-mode="dark" -->
</html>
<!-- Available themes: ds-editorial, ds-brutalist,
ds-velvet, ds-clean, ds-onyx -->Use seu primeiro componente
Importe qualquer componente de @ghiberti85/ui e use no seu JSX. Nenhuma configuração extra necessária.
import { Button } from '@ghiberti85/ui'
export default function App() {
return <Button variant="primary">Hello, world!</Button>
}Troque temas e modo escuro
Temas e modo escuro são CSS puro — troque um atributo data em tempo de execução e todos os componentes atualizam instantaneamente.
// Switch theme at runtime — no re-render needed
document.documentElement.setAttribute('data-theme', 'ds-editorial')
// All available themes:
// 'ds-editorial' | 'ds-brutalist'
// 'ds-velvet' | 'ds-clean' | 'ds-onyx'// Toggle dark mode
document.documentElement.setAttribute('data-mode', 'dark')
// Remove for light mode
document.documentElement.removeAttribute('data-mode')