21st.dev: uma plataforma de código aberto para obter e compartilhar rapidamente componentes da interface do usuário do React

21st.dev é uma plataforma de código aberto voltada para a criação, o compartilhamento e a instalação de componentes de IU React. Inspirada no shadcn/ui, ela fornece componentes leves e modernos com base no Tailwind CSS e na interface do usuário Radix. Os desenvolvedores podem instalar rapidamente os componentes, publicar seu trabalho ou gerar várias variantes de UI por meio de IA. A plataforma é compatível com TypeScript e é fácil de usar por meio do aplicativonpx shadcnOs componentes podem ser integrados com comandos. O modelo orientado pela comunidade incentiva os desenvolvedores a contribuir e é adequado para que os desenvolvedores front-end e os engenheiros de design criem rapidamente belas interfaces.

Lista de funções

• Fornece componentes React baseados em shadcn/ui com suporte para Tailwind CSS e Radix UI.
• fazer uso denpx shadcnpara instalar componentes e suas dependências com um clique.
• Oferece suporte à geração de IA de cinco variantes de componentes da interface do usuário para seleção ou ajuste pelo usuário.
• Permitir que os desenvolvedores publiquem componentes personalizados para compartilhar com a comunidade.
• Oferece demonstrações de vários componentes, incluindo visualizações prévias e apresentações em vídeo.
• Suporte a TypeScript, os componentes são leves e personalizáveis.
• Recurso Remix integrado para ajustar estilos de componentes por meio de IA ou bate-papo.
• O suporte à comunidade de código aberto incentiva os usuários a contribuir com código por meio do GitHub.

Usando a Ajuda

Instalação e uso

A instalação dos componentes do 21st.dev é muito simples e é feita principalmente por meio donpx shadcnpara concluir. Veja a seguir as etapas detalhadas:

1. Preparação do ambiente de desenvolvimento
   Certifique-se de que seu projeto tenha o Node.js e o npm instalados. Recomenda-se o uso de estruturas de front-end modernas, como Next.js ou Vite. Os projetos precisam oferecer suporte ao React e ao Tailwind CSS.
2. componente instalado
   Abra um terminal no diretório raiz do projeto e execute os seguintes comandos para instalar os componentes necessários. Por exemplo, instale o componente accordion:

   npx shadcn@latest add "https://21st.dev/r/shadcn/accordion"
   

Esse comando é automático:

• Faça o download do código do componente e de suas dependências.
• Crie os arquivos necessários (por exemplo, JSX e CSS).
• Atualize o arquivo de configuração do Tailwind para adicionar estilos de tema.
• Configure estilos globais (se necessário).

Em vez de copiar o código manualmente, onpx shadcngarante que as dependências estejam completas e evita erros de configuração. Depois de instalado, o componente está pronto para ser usado no projeto.

3. Uso de componentes
   Quando a instalação for concluída, o componente aparecerá no diretório especificado do projeto (geralmente o diretóriocomponentspasta). Por exemplo, o código para usar o componente accordion é o seguinte:

   import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
   export default function MyComponent() {
   return (
   <Accordion type="single" collapsible>
   <AccordionItem value="item-1">
   <AccordionTrigger>标题</AccordionTrigger>
   <AccordionContent>内容</AccordionContent>
   </AccordionItem>
   </Accordion>
   );
   }
   

   Você pode ajustar o estilo ou a lógica para atender às necessidades do seu projeto.

Operação da função em destaque

Variantes de componentes geradas por IA

A função "Magic Agent" do 21st.dev gera cinco variantes de componentes da interface do usuário por meio de IA. As etapas são as seguintes:

1. Acesse 21st.dev e insira os requisitos do componente (por exemplo, "Login Form").
2. Ao clicar no botão "Generate", você verá uma visualização de cinco estilos diferentes de componentes.
3. Selecione uma variante e clique no botão "Remix with AI" para ajustar ainda mais o layout, a cor ou o espaçamento.
4. Interaja com a IA por meio da interface de bate-papo, insira requisitos específicos (por exemplo, "aumentar o espaçamento dos botões") e a IA modificará o código em tempo real.
5. Faça o download de componentes satisfatórios ou copie o código diretamente no projeto.

Publicação de componentes personalizados

Os desenvolvedores podem compartilhar seus componentes com as seguintes etapas:

1. Faça login no 21st.dev e vá para a página "Publish" (Publicar).
2. Faça upload do código do componente, preencha a descrição, as tags e a visualização da demonstração.
3. Após o envio, o componente entra no estado "on_review" e só fica visível por meio do link direto.
4. Após a aprovação, o componente muda para o status "publicado" e aparece em seu perfil e nas páginas da comunidade.
5. Outros usuários podem ser contatados por meio donpx shadcnInstale seus componentes.

Contribuições da comunidade

O 21st.dev incentiva os desenvolvedores a participarem de contribuições de código aberto:

1. Visite o repositório do GitHub (https://github.com/21st-dev).
2. Repositório de bifurcação e clone localmente.
3. Use um editor (como o Cursor) para desenvolver novos componentes ou corrigir problemas.
4. Envie o Pull Request para a ramificação master e aguarde a revisão.
5. Participe da comunidade do Discord e conecte-se com outros desenvolvedores.

advertência

• Certifique-se de que o CSS do Tailwind tenha sido configurado corretamente; caso contrário, os estilos dos componentes poderão não funcionar.
• Os componentes gerados por IA podem exigir ajustes manuais no código para se adequarem ao projeto.
• Fornecer documentação clara e demonstrações ao liberar componentes ajuda a passar na auditoria.

cenário do aplicativo

1. Crie rapidamente interfaces de front-end
   Os desenvolvedores de front-end podem economizar tempo de desenvolvimento obtendo componentes prontos (como botões, formulários, barras de navegação) por meio do 21st.dev ao desenvolver aplicativos da Web. Após a instalação, você pode ajustar diretamente o estilo para atender aos requisitos do projeto.
2. Compartilhamento de componentes para engenheiros de projeto
   Os engenheiros de design podem publicar componentes de interface do usuário bem projetados na plataforma para que outros desenvolvedores os utilizem e, ao mesmo tempo, otimizar seu trabalho por meio do feedback da comunidade.
3. Iteração da interface do usuário assistida por IA
   Os gerentes de produto ou iniciantes podem usar a IA para gerar várias variantes de interface do usuário para validar rapidamente as ideias de design sem codificação profunda.
4. Desenvolvimento de projetos de código aberto
   As equipes de projetos de código aberto podem aproveitar a biblioteca de componentes do 21st.dev para unificar o estilo da interface e, ao mesmo tempo, contribuir com seus próprios componentes para expandir o alcance do projeto.

QA

1. Os componentes do 21st.dev são gratuitos?
   Sim, a 21st.dev é uma plataforma de código aberto e todos os componentes são de uso gratuito, mas alguns recursos avançados podem exigir uma assinatura (por exemplo, uma cota maior de geração de IA).
2. Como posso ter certeza de que os componentes são compatíveis com meu projeto?
   Os componentes são desenvolvidos com base em React, Tailwind CSS e Radix UI. Certifique-se de que o projeto seja compatível com essas pilhas de tecnologia e que o Tailwind CSS esteja configurado adequadamente para fins de compatibilidade.
3. Os componentes gerados por IA estão disponíveis comercialmente?
   Sim, mas verifique o protocolo de código aberto (por exemplo, MIT) para o componente específico. Recomenda-se confirmar a propriedade dos direitos autorais antes da comercialização.
4. Quanto tempo leva para publicar um componente para análise?
   Normalmente, de 1 a 3 dias, dependendo da integridade dos componentes e da qualidade da documentação.