Biblioteca de componentes de UI para Angular.

---

Pré-requisitos

Para começar a utilizar o PO UI é pré-requisito ter o Node.js instalado (versão 20.11.x ou acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote @angular/cli, instale-o via npm ou yarn.

Instalando com npm:

npm i -g @angular/cli@21

Caso prefira instalar com o yarn:

yarn global add @angular/cli@21

Passo 1 - Crie o seu primeiro projeto

Caso você já tenha um projeto criado e deseje apenas incluir o Po, pule esta etapa e vá para o Passo 1.1.

O Angular CLI se encarrega de construir toda estrutura inicial do projeto. Para isso, execute o seguinte comando:

ng new my-po-project --skip-install

O parâmetro --skip-install permite criar o projeto, contudo, não instalará as dependências automaticamente.

Passo 1.1 - Instalando as dependências

Antes de executar a instalação ou inserir o Po no seu projeto existente, é necessário verificar as dependências do seu projeto, algumas delas precisam estar de acordo com a versão do Po e Angular (elas podem ser encontradas no arquivo package.json localizado na raiz da aplicação).

Veja abaixo a lista de dependências e as versões compatíveis, elas devem ser conferidas e se necessário, ajustadas no seu projeto.

  "dependencies": {
    "@angular/animations": "~21.0.3",
    "@angular/common": "~21.0.3",
    "@angular/compiler": "~21.0.3",
    "@angular/core": "~21.0.3",
    "@angular/forms": "~21.0.3",
    "@angular/platform-browser": "~21.0.3",
    "@angular/platform-browser-dynamic": "~21.0.3",
    "@angular/router": "~21.0.3",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.2",
    "zone.js": "~0.15.0"
    ...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~21.0.3",
    "@angular-devkit/schematics": "~21.0.0",
    "@angular/cli": "~21.0.3",
    "@angular/compiler-cli": "~21.0.0",
    ...
    "typescript": "~5.9.3"
  }

Após verificar se estas dependências do seu projeto estão com as versões compatíveis declaradas acima, acesse a pasta raiz do seu projeto e execute o comando abaixo:

Instalando com npm:

npm install

Caso utilizar a versão 7 do npm pode ocorrer erro de versão das dependências, neste caso utilize npm install --legacy-peer-deps.

Caso prefira instalar com o yarn:

yarn install

Passo 2 - Adiconando o pacote @po-ui/ng-components

Utilizando o comando ng add do Angular CLI, vamos adicionar o Po em seu projeto e o mesmo se encarregará de configurar o tema, instalar o guia de primeiros passos Po. Além de importar também o modulo HttpClientModule.

Execute o comando abaixo na pasta raiz do seu projeto:

ng add @po-ui/ng-components

Ao executar o comando acima, será perguntado se deseja incluir uma estrutura inicial em seu projeto com menu lateral, página e toolbar, utilizando componentes do Po, caso desejar, apenas informe: Y.

Passo 3 - Rode o seu projeto

Agora basta executar mais um comando para subir a aplicação e ver o seu projeto rodando no browser ;).

ng serve

Abra o browser e acesse a url http://localhost:4200. Pronto!

---

MCP? Sim!

Temos uma ótima notícia para a comunidade de desenvolvedores! Nossa biblioteca Angular agora faz parte do Context7, uma plataforma que fornece documentação e trechos de código sempre atualizados para LLMs e editores de código com suporte a IA.

O que isso significa para você?

• Acesso Rápido à Documentação: Obtenha a documentação mais recente e exemplos de uso da nossa biblioteca diretamente em seu ambiente de desenvolvimento, como Cursor, Claude e outros LLMs.
• Desenvolvimento Acelerado com IA: Ao usar um editor de código com IA, você pode instruí-lo a utilizar nossa biblioteca e ele terá acesso a todo o contexto necessário para gerar código preciso e funcional.

Suporte ao Protocolo de Contexto de Modelo (MCP)

Nossa biblioteca está disponível através de um servidor MCP do Context7. O MCP é um padrão aberto projetado para conectar de forma inteligente assistentes de IA a fontes de dados, como a documentação da nossa biblioteca. Isso garante que a IA tenha o contexto correto para responder às suas solicitações de programação com maior precisão.

Para começar, basta mencionar o nome da nossa biblioteca em suas interações com um LLM que suporte o Context7.

---

E agora?

Agora é só abrir seu editor / IDE favorito e começar a trabalhar no seu projeto.

Caso você queira utilizar nossos componentes de templates, como o po-page-login, po-modal-password-recovery, po-page-blocked-user, po-page-dynamic-table entre outros, basta adicionar o pacote @po-ui/ng-templates executando o comando abaixo:

ng add @po-ui/ng-templates

Ao executar este comando, será instalado o pacote @po-ui/ng-templates e configurado o PoTemplatesModules no app.module.

A partir dai o seu projeto está preparado para receber outros componentes do PO UI! \o/