Bora construir o @shadcn/ui para angular? Projeto open-source e feito pela comunidade BR 🇧🇷

BSIcja.png

Esse post é uma convocação a toda a comunidade Angular BR! 🚀

Bora construir a melhor biblioteca de componentes para Angular juntos?

Se você já sentiu falta de uma alternativa ao @shadcn/ui, mas para Angular, essa é a hora de fazer acontecer! 💜

Estamos criando o Zard UI, uma biblioteca de componentes open-source, moderna e totalmente customizável com Angular, Typescript e Tailwind.

🔥 Qual é a nossa ideia? ✔ Ter a beleza do shadcn/ui ✔ Ter a experiência de desenvolvimento do ng-zorro ✔ Os componentes serem 100% customizáveis ✔ Ser feito pela comunidade, para a comunidade

Da uma olhada nos links abaixo e vamos fazer isso acontecer 🚀


Links

🔗 Site: https://www.zardui.com/ 🔗 Github: https://github.com/zard-ui/zardui 🔗 Whatsapp: https://chat.whatsapp.com/Dctdh6Huhvm24OX6js5XKT 🔗 Discord: https://discord.gg/Dqwet89F 🔗 Vídeo: https://youtu.be/o4Xjn-EZ1Lo

e o spartan? nao é um clone? conhece ele?

cara, eu conheci o spartan quando o dev lançou, mas eu confesso que desanimei quando vi a forma como os componentes foram feitos para uso. Ele levou a ideia do shadcn muito a risca pro angular, o que acaba perdendo um pouco a experiência de desenvolvimento. Olha o uso de um simples alert: https://spartan.ng/components/alert-dialog#usage ```ts import { Component } from '@angular/core'; import { BrnAlertDialogContentDirective, BrnAlertDialogTriggerDirective, } from '@spartan-ng/brain/alert-dialog'; import { HlmAlertDialogActionButtonDirective, HlmAlertDialogCancelButtonDirective, HlmAlertDialogComponent, HlmAlertDialogContentComponent, HlmAlertDialogDescriptionDirective, HlmAlertDialogFooterComponent, HlmAlertDialogHeaderComponent, HlmAlertDialogOverlayDirective, HlmAlertDialogTitleDirective, } from '@spartan-ng/ui-alertdialog-helm'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Component({ selector: 'spartan-alert-dialog-preview', standalone: true, imports: [ BrnAlertDialogTriggerDirective, BrnAlertDialogContentDirective, HlmAlertDialogComponent, HlmAlertDialogOverlayDirective, HlmAlertDialogHeaderComponent, HlmAlertDialogFooterComponent, HlmAlertDialogTitleDirective, HlmAlertDialogDescriptionDirective, HlmAlertDialogCancelButtonDirective, HlmAlertDialogActionButtonDirective, HlmAlertDialogContentComponent, HlmButtonDirective, ], template: `

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

`, }) export class AlertDialogPreviewComponent {} ``` Agora olha a diferença de uso com o ng-zorro: https://ng.ant.design/components/modal/en#components-modal-demo-confirm ```ts constructor(private modal: NzModalService) {} showConfirm(): void { this.modal.confirm({ nzTitle: 'Do you Want to delete these items?', nzContent: 'Some descriptions', nzOnOk: () => console.log('OK') }); } ``` É essa a experiência que queremos levar aos devs com o Zard UI.
Ah sim, entendi. Na verdade vc está construindo uma lib UI pro Angular. isso é bem legal. Eu achei que era um shadcn clone. Você conhcece o primeng ? Ah, no seu video no youtube, vc cnosegue habilitar a tradução de audio pro ingles? Acho que assim vai captar mais