Instalação
Adicione o design system Uranus a um projeto React ou Next.js.
Instale os pacotes
Os dois pacotes são públicos no npm — sem .npmrc, sem token de autenticação.
pnpm add @uranus-workspace/design-system @uranus-workspace/blocks motion@uranus-workspace/design-system é o pacote de primitivos. @uranus-workspace/blocks traz layouts de nível mais alto compostos a partir desses primitivos. motion é uma peer dependency e precisa ser instalada explicitamente.
Conecte os estilos
Importe a folha de estilo compartilhada uma única vez no ponto de entrada do seu app:
import '@uranus-workspace/design-system/styles.css';Isso traz o preset do Tailwind v4, a camada de tokens e os overrides de modo escuro.
Use um componente
import { Button, Card, CardContent, CardHeader, CardTitle } from '@uranus-workspace/design-system';
import { PageHeader } from '@uranus-workspace/blocks';
export default function Page() {
return (
<>
<PageHeader title="Projetos" actions={<Button>Novo projeto</Button>} />
<Card>
<CardHeader>
<CardTitle>Boas-vindas</CardTitle>
</CardHeader>
<CardContent>Tudo pronto para construir.</CardContent>
</Card>
</>
);
}