Instalação
1
Instale o pacote
bash
npm install @nova-ai/dsPeer dependencies obrigatórias:
bash
npm install react react-dom tailwindcss clsx tailwind-mergePara animações e ícones (opcionais):
bash
npm install gsap lucide-react2
Configure o Tailwind
Adicione o preset ao seu tailwind.config.ts. Ele injeta todas as cores, fontes, espaçamentos e animações do DS automaticamente.
typescript
import type { Config } from "tailwindcss";
import { novaAiPreset } from "@nova-ai/ds/tailwind-preset";
const config: Config = {
presets: [novaAiPreset],
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@nova-ai/ds/dist/**/*.{js,ts,jsx,tsx}",
],
};
export default config;3
Importe os estilos globais
No seu app/layout.tsx ou globals.css:
typescript
import "@nova-ai/ds/styles";Isso carrega os tokens CSS (--brand-green, --bg-card, etc.), o reset e as classes utilitárias.
Primeiro componente
Com tudo configurado, importe e use qualquer componente:
tsx
import { Button, Card, CardHeader, CardTitle, ScrollReveal } from "@nova-ai/ds";
export default function Page() {
return (
<ScrollReveal>
<Card>
<CardHeader>
<CardTitle>Olá, NOVA AI</CardTitle>
</CardHeader>
<Button accent="green">Começar</Button>
</Card>
</ScrollReveal>
);
}Fontes
O DS usa Gyrotrope (display) e Geist Sans/Mono (corpo). Geist está disponível via npm install geist. Gyrotrope precisa ser adicionada manualmente em public/fonts/.
tsx
// app/layout.tsx
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
// globals.css — para Gyrotrope local:
// @font-face {
// font-family: "Gyrotrope";
// src: url("/fonts/Gyrotrope-Variable.woff2") format("woff2");
// }Tema dark / light
O DS é dark por padrão. Para ativar o tema light, adicione data-theme="light" no elemento raiz:
html
// Dark — padrão, sem atributo necessário
<html lang="pt-BR">
// Light
<html lang="pt-BR" data-theme="light">Todos os tokens semânticos (--bg-body, --text-primary, --bg-card, etc.) se adaptam automaticamente.