🧩 ng-atomic-ui

CLI para adicionar micro-componentes Angular estilizados com Tailwind CSS ao seu projeto.

O ng-atomic-ui segue a mesma filosofia do shadcn/ui: ao invés de instalar uma dependência de biblioteca, os componentes são copiados diretamente para o seu projeto. Isso significa que você tem total controle sobre o código, podendo customizar cada componente como desejar.

✨ Features

• 📦 Componentes Angular standalone prontos para uso
• 🎨 Estilizados com Tailwind CSS (v3 e v4)
• 🔧 Totalmente customizáveis — os arquivos são seus
• 🏗️ Detecção automática da versão do Tailwind (v3 ou v4)
• 📝 Suporte a projetos com CSS e SCSS
• 🎯 Ícones com Lucide Angular

📋 Pré-requisitos

• Node.js v18+
• Um projeto Angular (v17+)
• Tailwind CSS instalado no projeto (v3 ou v4)

🚀 Quick Start — Do Zero

1. Crie um projeto Angular selecionando o Tailwind CSS como estilo

ng new meu-projeto
cd meu-projeto

2. Instale o Tailwind CSS

Tailwind v4 (recomendado para Angular 19+)

npm install -D tailwindcss @tailwindcss/postcss postcss

Adicione o import do Tailwind no seu arquivo de estilos global (src/styles.css):

@import "tailwindcss";

⚠️ Projeto com SCSS? Não se preocupe! O ng-atomic-ui init vai cuidar disso automaticamente, criando um arquivo CSS separado para o Tailwind.

Tailwind v3 (projetos legados)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Adicione no src/styles.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

3. Instale o ng-atomic-ui globalmente

npm install -g ng-atomic-ui

4. Inicialize o ng-atomic-ui no seu projeto

ng-atomic-ui init

Este comando irá:

• ✅ Criar a pasta src/app/shared/ui/
• ✅ Copiar os utilitários (cn.ts, preset de cores, tema)
• ✅ Configurar o Tailwind automaticamente (preset para v3 ou @theme para v4)
• ✅ Instalar dependências necessárias (lucide-angular, tailwind-merge, clsx)
• ✅ Configurar o PostCSS se necessário (Tailwind v4)

5. Adicione um componente

ng-atomic-ui add ui-button

6. Use no seu componente Angular

import { Component } from '@angular/core';
import { UiButtonComponent } from './shared/ui/ui-button.component';

@Component({
  selector: 'app-root',
  imports: [UiButtonComponent],
  template: `
    <ui-button type="primary" (clicked)="onClick()">
      Clique aqui
    </ui-button>
  `
})
export class AppComponent {
  onClick() {
    console.log('Clicou!');
  }
}

7. Inicie o servidor

ng serve

💡 Dica: Sempre reinicie o ng serve após rodar ng-atomic-ui init, pois as alterações no angular.json e .postcssrc.json só são capturadas ao reiniciar o dev server.

📖 Comandos

ng-atomic-ui init

Inicializa o ng-atomic-ui no seu projeto Angular.

ng-atomic-ui init              # Inicializa e instala dependências
ng-atomic-ui init --skip-install  # Inicializa sem instalar dependências

ng-atomic-ui add <componente>

Adiciona um componente ao projeto.

ng-atomic-ui add ui-button         # Adiciona o botão
ng-atomic-ui add ui-accordion      # Adiciona o accordion (múltiplos arquivos)
ng-atomic-ui add ui-button --force # Sobrescreve se já existir

ng-atomic-ui list

Lista todos os componentes disponíveis.

ng-atomic-ui list

🧱 Componentes Disponíveis

| Componente | Descrição | |---|---| | ui-accordion | Accordion com itens expansíveis | | ui-alert | Alertas contextuais (info, success, warning, danger) | | ui-breadcrumb | Breadcrumb de navegação | | ui-button | Botão com variantes e tamanhos | | ui-calendar | Calendário de seleção de data | | ui-card | Card container estilizado | | ui-checkbox | Checkbox com label e ícone | | ui-dropdown | Menu dropdown com itens e separadores | | ui-input | Campo de texto estilizado | | ui-modal | Modal/Dialog com overlay | | ui-pagination | Paginação com navegação | | ui-popover | Popover posicional | | ui-profile | Avatar/perfil de usuário | | ui-progress | Barra de progresso | | ui-radio | Radio group com itens | | ui-select | Select/combobox estilizado | | ui-sidebar | Sidebar de navegação | | ui-skeleton | Skeleton loading placeholder | | ui-slide-panel | Painel deslizante lateral | | ui-switch | Toggle switch on/off | | ui-table | Diretivas para tabelas estilizadas | | ui-tabs | Abas de navegação | | ui-textarea | Área de texto estilizada | | ui-toast | Notificações toast temporárias |

🎨 Personalização de Cores

Os componentes utilizam uma paleta de cores customizada. Você pode alterá-la editando os arquivos de configuração:

Tailwind v4

Edite src/app/shared/ui/utils/ng-atomic-ui-theme.css:

@theme {
  --color-primary: #0f265c;      /* Sua cor primária */
  --color-primaryLight: #14357f;  /* Variante mais clara */
  --color-secondary: #1dc9ac;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-warning: #d97706;
  --color-info: #0ea5e9;
  --color-silver: #626e84;
}

Tailwind v3

Edite src/app/shared/ui/utils/ng-atomic-ui-preset.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#0f265c',
        primaryLight: '#14357f',
        secondary: '#1dc9ac',
        // ...
      }
    }
  }
}

📂 Estrutura do Projeto

Após rodar ng-atomic-ui init, a seguinte estrutura é criada no seu projeto:

src/app/shared/ui/
├── utils/
│   ├── cn.ts                  # Utilitário para merge de classes Tailwind
│   ├── ng-atomic-ui-preset.js     # Preset de cores (Tailwind v3)
│   └── ng-atomic-ui-theme.css     # Tema de cores (Tailwind v4)
├── ui-button.component.ts     # Componentes adicionados
├── ui-alert.component.ts
└── ...

🤝 Contribuindo

1. Clone o repositório
2. Instale as dependências: npm install
3. Teste no playground: cd playground && node ../bin/ng-atomic-ui.js list

📄 Licença

ISC