Pharos

Instalação

Como instalar e configurar o Pharos no seu projeto.

Instalação

Pharos é o design system da Alexandria. Você importa CSS pré-compilado e componentes React tipados — sem plugin de build obrigatório.

Pacotes

# npm
npm install @pharos-ds/core @pharos-ds/theme-pharos
npm install -D @pharos-ds/cli
 
# pnpm
pnpm add @pharos-ds/core @pharos-ds/theme-pharos
pnpm add -D @pharos-ds/cli
 
# yarn
yarn add @pharos-ds/core @pharos-ds/theme-pharos
yarn add -D @pharos-ds/cli

CSS

Importe na ordem abaixo (reset → base → tema):

@import "@pharos-ds/core/reset.css";
@import "@pharos-ds/core/pharos.css";
@import "@pharos-ds/theme-pharos/theme.css";

Theme provider

Envolva a aplicação com <Theme> e o tema built do Pharos:

'use client';
 
import Link from 'next/link';
import {Theme} from '@pharos-ds/core/theme';
import {LinkProvider} from '@pharos-ds/core/Link';
import {pharosTheme} from '@pharos-ds/theme-pharos/built';
 
export function Providers({children}: {children: React.ReactNode}) {
  return (
    <Theme theme={pharosTheme} mode="system">
      <LinkProvider component={Link}>{children}</LinkProvider>
    </Theme>
  );
}

Primeiro componente

import {Button} from '@pharos-ds/core/Button';
 
export function Exemplo() {
  return <Button label="Salvar" variant="primary" />;
}

CLI (recomendado)

Para documentação sempre atualizada e scaffolding:

npx @pharos-ds/cli init
npx @pharos-ds/cli component --list
npx @pharos-ds/cli component Button

Use o nome com escopo @pharos-ds/cli — o pacote bare pharos no npm é outro projeto.

Próximos passos

Instalação · Pharos