Libs React em cima do shadcn/ui
Há ótimas libs de componentes sobre shadcn/ui — mas 'a melhor' muda rápido. Escolha por critérios e teste antes de adotar.
Por que 'melhor' muda rápido
Nesta parte do material sobre bibliotecas react shadcn ui, o foco é «Por que 'melhor' muda rápido». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Eu literalmente encontrei as melhores bibliotecas de componentes React construídas em cima de shared CNUI. Tudo de componentes de base limpa que são perfeitos para construir fundações, para slick animados apoiados pela motion do frame. E eu até encontrei sementes de UI completas projetadas para impressionar você, seus amigos e seus clientes não existentes.
Eu vou até mostrar-lhe um site legal que dá acesso a mais de 100 rastros que você pode usar para fazer seus sites parecerem únicos. Vamos e até motion de frame para animações boas, então vamos olhar alguns componentes se você escalar para baixo você encontrará muitos componentes ou em outras palavras categorias para componentes, vamos talvez começar com o componente de tabas, então este aqui é apenas o componente de cn ui de chat estándar como todos sabemos, mas se escalarmos um pouco para baixo você encontrará variações bonitas com esses ícones bonitos ou com badges ou aqui está um design de botão que também parece legal eles têm um design de pil sim eu gosto disso um design de linha e apenas em geral você verá que é muito chato e heavy com variações bonitas eles também têm este componente de grita de dados se você scroll a bit to the bottom you will find nice variations this looks kind of cool e se eu clicar nos botões tudo funciona claro e isso também é construído em cima de uma mesa de 10 stack agora se você já construiu grids de dados então você vai saber o quão complicado é construir uma mesa tão bonita e vamos descer um pouco para baixo, isso é ainda melhor aprovado pós-pandêmio novamente tudo funciona aqui também temos essa variação o que eu gosto bastante sobre essa biblioteca é que eles literalmente enviam o tempo todo, semanalmente novas publicações de funções. Agora, se eu tivesse que alcançar essa biblioteca em uma escala de 1 a 10, então eu daria isso um 8 solidário, porque é poderoso, o time navega muito e, em geral, os componentes são construídos muito bem.
Critérios de escolha
Nesta parte do material sobre bibliotecas react shadcn ui, o foco é «Critérios de escolha». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Mas agora, antes de continuarmos com a próxima biblioteca, quero agradecer ao sponsor de hoje, Kodo, por apoiar este vídeo. Ele realmente entende sua base de código, como suas convenções de nome, sua estrutura. Bem, ele indexa sua base de código, veja isso, estou em APR, eu apenas coloco um comentário com você e expõe feedback legítimo, notas de segurança, bugs de lógica, dicas de limpeza, tudo alinhado com este projeto.
Agora, isso é o oposto de VUI porque essas são seqüências completamente completas, então, como dizem aqui, blocos para websites modernos e eles são responsáveis e apenas bonitos. Oh meu Deus, isso parece tão bonito e se você scrollar para o fundo, essa imagem de fundo é meio legal com essas estrelas e então temos esses logos e também Então. E em geral eles tem muitos componentes, então se você clicar em blocos, você vai encontrar todas as secções na barra de nave no topo.
Na prática
Melhores libs de componentes React sobre shadcn/ui (com ceticismo saudável).
Camada sobre shadcn
Nesta parte do material sobre bibliotecas react shadcn ui, o foco é «Camada sobre shadcn». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Então eles tem secções de heróis, secções de logo cloud, secções de funções, e por exemplo, eu gosto muito das secções de sign up, porque elas são limpas, mas elas são poderosas, e é o que eu quero. É também meio assustador porque essas componentes são simples sim não é desgraçado, mas se você clicar no fundo você encontrará essas seqüências bonitas, isso é provavelmente um dos meus componentes favoritos porque isso é tipo esse grito bento que é meio hipotético como todos sabem e parece bonito e novamente é responsável, então se eu for para uma tela móvel, funciona totalmente, vamos talvez também olhar rapidamente o código, eu reviewei o código, o código é bom, eles têm E em geral, eu tenho seguido o time que construiu essa biblioteca já há bastante tempo e eles fizeram um ótimo trabalho. Experiência e aqui por exemplo esta é a seção de preços novamente é simples mas bonita em uma escala de 1 a 10 eu daria um 9 solidário porque honestamente eu adoro este projeto e é um gem que eu já estava me escondendo por bastante tempo a próxima biblioteca que quero compartilhar com vocês é chamada motion primitivos agora eu acho que algumas pessoas já sabem sobre motion primitivos Mas, eu quero compartilhar com vocês Porque é uma biblioteca poderosa.
E se nós também olharmos para o código, então você verá aqui que isso é código simples, mas bom código. Se eu clicar na barra de busca, ela tem essa animação e, na teoria, isso seria bem legal para uma barra de busca. Isso é um mudador de jogo para os clientes, porque eles sabem quantos porcentagens eles já leram.
Como testar antes de adotar
Nesta parte do material sobre bibliotecas react shadcn ui, o foco é «Como testar antes de adotar». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
E em geral, isso é uma biblioteca de componentes fofinha e se eu tivesse que rangar em minha escala bonita, eu daria isso um 7 solidificado. Essa linda animação, então novamente eu vou fazer um refresh duro, parece linda, então isso novamente se construiu em cima de Taewon CSS, Motion, Shadzy e UI, Next.js e React e também talvez você me pergunte Hey-chan, por que todas essas bibliotecas de componentes usam Motion e não Taewon CSS? Bem, é bem simples Taewon CSS não pode criar animações tão suaves, então se eu pular sobre esta carta de sistemas de design é suave e vamos olhar os componentes em geral, então aqui na esquerda você verá que eles têm muitos componentes e vamos começar com o primeiro componente, a barra de busca de ação, agora isso como você vê aqui é sua barra de busca típica como eu acabei de mostrar com o código de marcial da minha website e em geral se eu digitar algo, obtemos um resultado que parece legal e temos animações com movimento do frame agora um dos meus componentes favoritos foi o grito do bento que temos para cartas e, em geral, não só as cartas se animam quando elas carregam, mas também se animam dentro.
Então, novamente, se eu fizer um refresh, nós temos essa animação, nós temos uma animação aqui e nós temos uma animação aqui. Então, isso usa muito o Framer Motion e se nós também olharmos o código, então eu posso copiar isso e paste-lo dentro aqui, então você verá novamente que este é um código limpo. Aqui temos o selecionador de input de AI e meu Deus, ele parece melhor do que o que oferece ChatGPT.
Sinais de que está funcionando
Nesta parte do material sobre bibliotecas react shadcn ui, o foco é «Sinais de que está funcionando». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Para que ele saia, ou por exemplo, o botão social, se eu clicar nela, eu tenho todas as opções, twitter, instagram, o botão de comando, se eu clicar em comando k, eu pego a barra de busca, isso é provavelmente uma das minhas bibliotecas de componentes favoritas que eu encontrei no internet, tudo é de alta qualidade, é livre de usar e se eu tivesse que rankingar essa biblioteca em minha escala bonita, então eu daria isso um 9 solidificado Há muitos componentes, tudo de componentes simples até componentes bastante avançados e eles são gratuitos de uso. Então, se eu não sou um grande fã de vermelho, Eu posso usar azul e você sabe o que? So if I click on these buttons, the images update E, novamente, ele se anima usando o movimento do frame.
E, em geral, isso faz com que seja mais fácil trabalhar com essas bibliotecas de componentes, ou, neste caso, com o SmoothUI. Eles também têm alguns blocos, não tantos blocos, então três em total, e eu sou um grande fã do bloco testemunhal, porque ele impressiona com sua suavidade, como você vê aqui, Aqui tem essa barra de progresso. Agora, se eu tivesse que rankingar isso na minha escala bonita, então eu daria a esta biblioteca um 8 de 10, porque os componentes são de alta qualidade, mas seria legal conseguir mais componentes, porque como você pode ver, o criador é habilidoso, o criador sabe o que ele faz, então seria legal conseguir mais componentes.
O que evitar na primeira semana
Nesta parte do material sobre bibliotecas react shadcn ui, o foco é «O que evitar na primeira semana». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Agora, muitos de vocês provavelmente já sabem sobre essa biblioteca, mas eu não mostrei para vocês na última vez, então eu vou mostrar hoje. Agora, isso é uma biblioteca poderosa, construída em cima de chat, CNUI e, claro, Framer Motion e eles têm muitos componentes, então podemos ir por eles rapidamente, por exemplo, o carousel de funções, se eu clicar em passo 2, recebemos este bom update, nós temos esta introdução, por exemplo, a forma de pop-up se eu clicar no feedback Ele anima suavemente e, como essa biblioteca de componentes já é bem grande, eles também praticamente otimizaram tudo. Você pode abrir em v0, você tem o código aqui.
Esse componente de grito é perfeito para praticamente qualquer SaaS para validar que você tem um ótimo produto. Agora, se eu tivesse que rankingar essa biblioteca em minha escala bonita, eu daria um 8 solidário e isso é porque eles têm muitos componentes, mas há uma coisa que eu estou faltando e é um idioma de design comum. E agora, a última biblioteca que eu quero compartilhar com vocês não é uma biblioteca de componentes, mas, em vez disso, oferece padrões e gradiões de fundo profissionais e grandes para suas redes sociais.
Como explicar isso para o time
Nesta parte do material sobre bibliotecas react shadcn ui, o foco é «Como explicar isso para o time». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
E elas têm mais de 100 padrões, ou, em outras palavras, backgrounds for you to use. So you can instantly test them out because you can click on preview and then you instantly get the background. And they have a mix, so they have backgrounds that work for light mode and also backgrounds that work for dark mode.
And this means you can test them all out and if you like them, then you can just click on copy and this will copy a Taewon CSS class. E, por acaso, esta biblioteca é chamada Pattern Craft, é poderosa, parece bonita e tem muitas categorias, como você vê aqui, e, em total, tem 120 personagens. E sim, pessoal, foram, em total, sete bibliotecas, tudo de componentes básicas para animações bem animadas, para completar seções de UI e até mesmo um site que oferece mais de 100 personagens.
Na prática
Próximo passo: escolha uma métrica (taxa de sucesso, tempo, retries ou conversão) e rode um experimento de 7 dias antes de escalar o padrão.