In this Portuguese‑language video, Samuel Arredondão introduces ZardUI, an open‑source Angular component library that aims to bring the design quality and customizability of shadcn/ui (originally for React) to the Angular ecosystem. He explains the motivation behind the project – the lack of a component library that matches shadcn’s aesthetics and flexibility – and outlines ZardUI’s core goals: free, highly customizable, developer‑friendly, and modern UI. Samuel reviews the current state of the project, showing the initial component set (badge, button, card, checkbox, input/textarea) and a functional dark theme. He dives into the technical architecture, describing the use of Angular Signals, Tailwind CSS, and a folder structure that separates component logic, variant classes, markdown documentation, and demo files. The documentation site is generated dynamically from markdown files (overview.md, api.md) and demo code, allowing live code previews and automatic API tables. Samuel then provides a step‑by‑step guide for contributors: cloning the GitHub repo, running npm install and npm start, locating the component source, adding new components, creating markdown demos, updating the dynamic component registry, and adding sidebar links. He calls the community to help by promoting the project, writing documentation, building new components, testing across browsers/devices, and sharing ideas. Links to the GitHub repository and Discord community are provided, and viewers are encouraged to like, subscribe, and stay tuned for future updates.
Chapters
E aí, meus amigos, tudo bem com vocês? Samuel Arredondão por aqui. E hoje eu tô bem empolgado pra compartilhar esse projeto com vocês. Eu quero falar sobre o ZardUI, que vai ser basicamente a alternativa ao ChatCN, só que pro Angular. Então a gente tá começando a desenvolver essa biblioteca nova e a gente precisa muito da sua ajuda. Então fica comigo até o final desse vídeo que eu vou te explicar tudo sobre o ZardUI e como que a gente vai mostrar pro mundo inteiro que a comunidade Angular aqui no Brasil é foda. Fechou? Só que antes de mostrar pra vocês a biblioteca e o que que a gente tá desenvolvendo, eu quero mostrar o porquê, né, o objetivo. Então a ideia de usar a UI basicamente surgiu da necessidade de usar o ShadowCN no Angular, só que o ShadowCN é uma biblioteca pro React e a gente sabe que é uma das melhores bibliotecas, se não a melhor biblioteca de componentes atualmente, só que ela só tem pro React. No Angular hoje a gente tem algumas alternativas, que é o Angular Material, que é o ng-zorro, o prime-ng e várias outras bibliotecas de componentes, mas nenhuma delas chega aos pés da beleza do ShadowCN e também da customização que o ChatCn oferece. Então, cara, o ChatCn, ele trouxe uma nova forma da gente usar uma biblioteca de componentes, que isso é fantástico, e essa é a mesma ideia que a gente quer usar nos RDY. Então, a ideia é criar uma biblioteca para Angular com os seguintes objetivos. Dá uma olhada aqui. O primeiro é ser open source e gratuita. Então, a ideia é que seja uma biblioteca acessível para todo mundo, que seja uma biblioteca totalmente customizável, assim como o ChatCn. Quando você instala, você não instala o ChatCn, você instala componente, ele copia o componente, por exemplo, de botão para dentro do seu projeto. Então, usar UI, a gente vai tentar seguir essa mesma ideia. Ela tem que ser fácil de usar, a gente tem que ter uma experiência de desenvolvimento muito boa, muito fácil, muito tranquila para utilizar os componentes e as interfaces, e ela precisa ser bonita e moderna. Então, o ChatCN já tem praticamente tudo isso aqui, e a nossa ideia é copiar a ideia do ChatCN, mas trazer uma experiência de desenvolvimento que nenhuma outra biblioteca de componentes para Angular que a gente tem hoje. E onde que a gente tá hoje? A gente já passou da fase inicial de estabelecer a estrutura básica do projeto, fazer as configurações, criar o projeto, criar o GitHub, definir algumas estruturas, e a gente já tá começando a criar os primeiros componentes e mexer na documentação. Eu vou explicar isso mais para frente para vocês. E aqui eu quero deixar meu agradecimento especial ao Luiz, é o cara que tá tomando a frente desse projeto. Ele que já tinha logo, ele já tinha a ideia, mas faltava alguém para dar um empurrãozinho. Eu fui lá e dei esse empurrãozinho para ele. E a gente já tá fazendo isso aqui juntos. Um agradecimento também ao Henrique da Codimension, que também tá ajudando a gente com a parte do deploy, já tá fazendo os testes unitários dele lá nos componentes. E tem outro Luiz também que já tá ajudando a gente a criar um componente de input, e a gente tá já nessa parte inicial de criar os nossos primeiros componentes. A ideia depois é a gente crescer e expandir para comunidade, e depois no futuro lançar oficialmente o ZardUI para toda comunidade Angular. Então vou mostrar o site para vocês, o que que a gente tem hoje. Essa aqui é a nossa landing page, a gente tá trabalhando nela ainda, mas a ideia é exatamente essa: finalmente uma alternativa real ao ChatGPT para o Angular, totalmente open source, e trazer, né, a ideia do ChatGPT, né, a beleza do ChatGPT com o poder da experiência de desenvolvimento que o ng-solvo traz para gente. Então quando a gente vem aqui nos componentes, a gente já tem alguns componentes que a gente criou. A gente tem o badge, botão, card, checkbox e o input. Essa documentação aqui eu vou mostrar para vocês como contribuir, né? A gente vai falar sobre como contribuir, mas essa documentação aqui a gente fez de uma forma que ela tá sendo gerada dinamicamente. Então, cara, isso aqui é muito legal. É um markdown que a gente cria aqui para gerar todos esses detalhes. Então é muito fácil da gente não só desenvolver e documentar ao mesmo tempo. Você viu como que é legal? Mas basicamente a gente tem os nossos exemplos aqui. Quando a gente clica aqui para ver o código a gente consegue ver o código, z-bed, o tipo dele, né, e as coisas que a gente tem para utilizar. No botão também a mesma coisa, os botões padrão, o tamanho dos botões. Quando a gente vem aqui, a gente consegue ver os detalhes, shape, loading, full. E no final a gente tem a API com as propriedades que a gente pode passar no nosso componente, tá bom? A gente tem um card, o checkbox e o input. E aí que a gente tem um input normal e também a gente tem um textarea aqui já prontinho para ser utilizado. A gente já tem um tema dark funcionando perfeitamente, como vocês podem ver. Então o que a gente tem hoje de componentes e documentação é isso aqui. Eu vou mostrar como que vocês podem ajudar e contribuir no projeto agora, tá? Primeira coisa, divulgando. Então, cara, a gente vai precisar divulgar isso tanto nas redes sociais, nos grupos de Angular, para a gente alcançar o maior número de pessoas possível, porque quanto mais gente souber mais gente vai querer usar, mais gente vai querer testar, mais gente vai querer fazer parte disso aqui. Você consegue ajudar documentando, mesmo que você não tenha muita experiência, né, com o desenvolvimento de um componente novo para Angular que vai ser customizável e tudo mais. Você pode nos ajudar documentando, tanto no site, na documentação de como criar biblioteca, como instalar, quanto na documentação dos componentes. Isso é essencial para gente. Outra forma que tem como ajudar é criando os componentes. Então a gente tem muito trabalho a fazer, tem muito componente para ser criado. A gente espera que você vá lá no GitHub, pegue uma enche lá, pega um componente, cria, abre um pull request, e a gente vai ajudar no que for preciso nessa parte. Fechou? E outra forma é testando. Então, testando em diferentes browsers, dispositivos, celular, tablet, o que você conseguir testar, testa, porque essa é uma parte muito importante para a gente entender, né, sobre a usabilidade, está tudo funcionando. E por último, mas não menos importante, contribuindo com ideias, compartilhando sugestões e melhorias que a gente pode fazer na biblioteca. Então você não precisa só ajudar criando componentes, você consegue ajudar de diversas outras formas e a gente precisa muito da sua ajuda e se unir com a comunidade pra gente criar esse projeto. Então, como que você pode contribuir numa forma mais prática? Basicamente é acessar o nosso repositório no GitHub que já tá público, o link vai tá aqui na descrição, dá um npm install pra instalar as dependências e depois dá um npm start pra ele rodar o projeto e abrir no localhost:4200. Eu vou mostrar isso para vocês agora. Eu tô aqui já com o projeto clonado, com npm install funcionando. npm start, ele já vai rodar aqui dois comandos. Primeiro comando é o server do Angular e o segundo comando é um script que a gente tem para gerar a documentação automática e já copiar para nossa pasta do projeto. Aqui dentro do nosso projeto a gente tem aqui em libs, zard-src/lib uma pasta de componentes. E aqui é onde estão ficando os nossos componentes. Então aqui, ó, a gente tem um bed e a gente tem esse componente de bed, que basicamente é um componente Angular. E a gente tem as classes, os inputs. A gente aqui já tá utilizando o Signals, então a gente tem os inputs e a gente tem as classes que serão utilizadas. As classes e as variantes, a gente tem um outro arquivo chamado bed-variants, e a gente tem aqui as classes básicas do Tailwind que vão estar dentro desse badge e as variantes do tipo default, secondary, destructive e outline, e o shape também. Então esse padrão aqui é o mesmo padrão que o ShadCN usa para criação dos componentes. E aí a gente tem duas pastas aqui dentro de cada componente. Uma chama doc, onde a gente tem um overview.md que vai ser a primeira coisa que vai aparecer na documentação desse componente. E um api.md, que é a última seção da página do componente. E aqui a gente vai ter a tabela, e como eu disse, é um Markdown, e isso aqui gera esse carinha aqui, ó. Quando a gente vem aqui em componentes, badge, ele tá gerando esse conteúdo e esse conteúdo aqui de cima. Outra pasta que a gente tem é a pasta demo, onde a gente vai colocar os arquivos de demonstração. Então a gente tem aqui o basic.md e o basic.ts. Esse código aqui é o código que vai ser mostrado quando a pessoa clicar em show code E esse mesmo código é o código que é renderizado aqui dentro desse card de demonstração. Então aqui a gente tem um MD, que é a descrição dele, um código renderizado e o código que a gente tem lá no nosso componente. Então a gente cria esses códigos aqui e o arquivo que fica visualizando, né, e fica assistindo as alterações nos arquivos, vai copiar essas duas pastas e colar no nosso projeto de documentação, que fica aqui em apps/web .ang, e aqui é um projeto Angular normal. Vou mostrar aqui para vocês que basicamente a gente tem algumas pastas aqui: a pasta de domain, components, pages, dynamic. Esse componente aqui que é renderizado aqui na nossa página de documentação, então ele vai pegar lá o overview.md, ele vai dar um ngFor nos nossos exemplos de componentes, que eles vêm de uma outra variável aqui onde a gente coloca a ordem. Dos componentes com o exemplo do componente que deve ser renderizado. E por último, ele vai colocar o footer com o api.md. Então, basicamente, ele tá gerando essa documentação. Quando a gente clica aqui, ele gera essa documentação por esse componente aqui. Quando você criar um novo componente aqui na nossa biblioteca, criou ele aqui dentro de componentes, bad, por exemplo, você vai adicionar esse componente aqui Vai criar as demos dele. Depois você vem aqui no nosso DynamicComponent, nessa variável de componentes que tá em shared, e coloca o componente aqui, porque aí ele vai ser renderizado lá. E também na sidebar é necessário colocar o link do menu na sidebar aqui do lado para ele aparecer aqui. Show! Então é basicamente dessa forma que você consegue contribuir de forma prática no ZardUI. Eu realmente acredito no potencial dessa biblioteca. E que a gente consegue sim criar a melhor biblioteca de componentes para Angular. Só que para isso a gente precisa de uma comunidade unida. Então se você quiser fazer parte desse projeto, eu vou deixar aqui na descrição o link do GitHub e do Discord para a gente conversar, para a gente estar próximo e fazer história juntos. Não esquece de deixar o seu like, se inscrever no canal e ativar o sininho para você ficar ligado nas próximas etapas desse projeto. Fechou? Valeu, até mais!
