Executando verificação de segurança...
19

ZardUI Beta: A biblioteca Angular onde o código é seu (de verdade!)

Fala, galera! 👋

Depois de meses trabalhando com 16 contribuidores, finalmente lançamos o ZardUI em beta - uma biblioteca de componentes Angular que segue a filosofia do shadcn/ui, mas adaptada pro nosso mundo Angular.

A real diferença

Sabe quando você instala uma biblioteca de componentes e fica preso nas limitações dela? Precisa criar wrapper em cima de wrapper pra customizar um botão?

Com ZardUI é diferente: o código é copiado direto pro seu projeto. Não é uma dependência - é código seu mesmo.

npx @ngzard/ui init
npx @ngzard/ui add dialog

Pronto! O componente dialog agora tá no seu projeto. Quer mudar? Muda. Quer refatorar? Refatora. É seu!

Por que fizemos isso?

A gente ama Angular, mas sempre ficou de olho no que tava rolando no ecossistema React. Quando surgiu o shadcn/ui, foi revolucionário - ao invés de instalar uma lib pesada, você copia os componentes pro projeto.

Aí surgiu o Spartan UI pro Angular, que é legal, mas a DX (developer experience) ficou meio complexa demais. Olha só quantos imports pra um simples alert:

// Spartan UI - muita coisa pra um alert básico
import {
  BrnAlertDialogContentDirective,
  BrnAlertDialogTriggerDirective,
  // ... mais 10 imports
} from '@spartan-ng/...';

No ZardUI, a gente focou em simplificar:

// ZardUI - simples e direto
import { DialogService } from '@/components/ui/dialog';

O que tem na beta?

  • 35 componentes prontos pra Angular 19+
  • Full TypeScript com módulos e wrappers inclusos
  • Tailwind CSS pra estilização
  • Design inspirado no shadcn/ui (bonito por padrão)
  • MIT license - livre pra sempre

Nossa filosofia

  1. O código é seu: Sem black boxes, sem vendor lock-in
  2. Zero breaking changes: Você controla quando e como atualizar
  3. Comunidade primeiro: 16 contribuidores (🇧🇷) construindo juntos
  4. Grátis pra sempre: Sem plano premium, sem pegadinha

Próximos passos

Tamo trabalhando num sistema de merge pra atualizações. A ideia é que quando melhorarmos um componente, você possa fazer merge seletivo - tipo git mesmo, você decide o que pegar.

Experimenta aí!

# Cria um projeto Angular 19+
ng new meu-app --style=css

# Inicializa o ZardUI
npx @ngzard/ui init

# Adiciona componentes
npx @ngzard/ui add button dialog form

Links:

Precisamos de vocês!

Isso é beta mesmo - tem coisa pra melhorar, bug pra arrumar, componente pra criar. Se você curte Angular e quer contribuir, cola no Discord ou abre uma issue no GitHub.

Queremos saber:

  • Que componente você mais precisa?
  • O que te incomoda nas libs atuais?
  • Como podemos melhorar a DX?

Se curtiu a ideia, dá uma estrela no GitHub - ajuda outros devs Angular a descobrirem o projeto! ⭐


PS: Se você já usou shadcn/ui no React, vai se sentir em casa. Se não usou, prepare-se pra nunca mais querer usar bibliotecas tradicionais 😅

Carregando publicação patrocinada...
3

O cuidado com o detalhe e a sofisticação da UI é algo que me chama atenção no projeto, com uma qualidade impecável de documentação. Eu vou acompanhar este projeto com certeza, para caso precise utilizar em algum momento nesta stack.

Sucesso!

1
1
0
1

Cara parabéns demais pela iniciativa! A tempos sobro estilizando 100% todo o html verboso do material angular para "criar" um design system especifico para os projetos da empresa em que trabalho. Já tentei criar components do 0 e cara absurdamente complexo e trabalhoso. Vou acompanha-los e com certeza tentar contribuir com o que for necessário para o projeto ficar cada vez mais foda!

1

Eu te entendo perfeitamente, ninguém merece o angular material 🤣 E valeu pelo apoio, só quem já tentou criar componentes na mão realmente sabe como é.

Espero podermos lançar a v1 ainda esse ano 🚀

1

Essa stack é como um sonho pra todo dev Angular que viu a facilidade que é o shadcn no React e quis algo semelhante pro Angular. Tem muito futuro, não deixem de trabalhar bastante nisso.

1
0

Eu dropei o Angular quando tive problemas pra estilizar antes, muita burocracia. Mas essa lib parece estar indo na direção certa, desejo muito sucesso! Torcendo de verdade aqui pra o ecossistema do angular dar uma evoluída.

1