shadcn/ui: plataforma de criação de biblioteca de componentes

Introdução geral

O shadcn/ui é uma plataforma de criação de biblioteca de componentes de código aberto que fornece componentes de interface do usuário bonitos e personalizáveis que os usuários podem copiar e colar em seus aplicativos. A plataforma é compatível com uma variedade de estruturas de front-end e fornece um guia detalhado de instalação e uso para ajudar os desenvolvedores a começar rapidamente e criar sua própria biblioteca de componentes.

Lista de funções

• Fornecer uma variedade de componentes de interface do usuário de alta qualidade
• Suporte a várias estruturas de front-end (por exemplo, Next.js, Vite, Remix, etc.)
• São fornecidas versões TypeScript e JavaScript dos componentes
• Instruções detalhadas de instalação e uso
• Código aberto e de uso gratuito

Usando a Ajuda

Processo de instalação

1. Estrutura de seleçãoEscolha estruturas compatíveis, como Next.js, Vite, Remix, Gatsby, Astro, Laravel, etc., com base nos requisitos do projeto.
2. Instalação de dependênciasInstalação das dependências necessárias usando npm ou yarn.

   npm install @shadcn/ui
   

3. Itens de configuraçãoConfigure os arquivos de projeto de acordo com os requisitos da estrutura selecionada. Por exemplo, configure a versão do TypeScript ou do JavaScript, configure o Tailwind CSS, etc.

   {
     "style": "default",
     "tailwind": {
       "config": "tailwind.config.js",
       "css": "src/app/globals.css",
       "baseColor": "zinc",
       "cssVariables": true
     },
     "rsc": false,
     "tsx": false,
     "aliases": {
       "utils": "~/lib/utils",
       "components": "~/components"
     }
   }
   

4. Importação de componentesImportar e usar os componentes necessários em seu projeto.

   import { Button } from '@shadcn/ui';
   

Diretrizes para uso

1. Navegar na biblioteca de componentesVisite o site shadcn/ui para navegar pelos componentes disponíveis e escolher o que melhor se adapta às necessidades de seu projeto.
2. Copiar e colar o código do componenteCopie e cole o código do componente fornecido no site oficial no projeto e faça as personalizações necessárias.
3. Componentes personalizadosO shadcn/ui oferece opções de configuração avançadas e suporta a personalização de estilo por meio do Tailwind CSS.
4. Testes e depuraçãoTeste a funcionalidade e o estilo dos componentes em um projeto para garantir que eles atendam às expectativas.
5. Publique um projetoApós concluir a integração dos componentes, crie e libere o projeto.

Procedimento de operação detalhado

• Instalação de dependênciasVerifique se os pacotes de dependência necessários, como React, Tailwind CSS etc., estão instalados no projeto.
• arquivo de configuraçãoConfigure o arquivo tsconfig.json ou jsconfig.json de acordo com os requisitos do projeto, defina aliases de caminho, etc.
• Importação de componentesImportar e usar os componentes fornecidos pelo shadcn/ui nos arquivos que precisam usar os componentes.
• Estilos personalizadosPersonalize a aparência dos componentes usando o Tailwind CSS ou outras ferramentas de estilo.
• Depuração e otimizaçãoDepuração e otimização de componentes durante o desenvolvimento para garantir o desempenho e a compatibilidade.