Atualmente existem muitos frameworks CSS, como Bootstrap, Bulma, Semantic UI etc. o que pode acelerar a construção de um display (interface do usuário). uma das ferramentas CSS que está em alta atualmente é Shadcn/ui, o que era antes?

No site oficial afirma Shadcn/ui

“uma coleção de componentes reutilizáveis ​​que podemos copiar e colar em nossos aplicativos.”

Então shadcn/ui é uma coleção de componentes reutilizáveis ​​em visualizações, construídos usando TailwindCSS e RadixUI. Atualmente suporta diversos frameworks como Next.js, Laravel e assim por diante. pode ser visto no site oficial Shadcn/ui.

Das muitas estruturas que são suportadas. Nosso principal objetivo é como instalar o Shadcn/ui no Laravel React, usando o Laravel Breeze.

Primeiro passo: instale o projeto laravel.

laravel new laravel-shadcn

Aqui usamos o instalador do Laravel (global). Na próxima etapa seremos solicitados a escolher uma opção como na imagem abaixo

Preencha de acordo com as necessidades do seu projeto. Nesse caso, aguarde até que a instalação seja concluída. A velocidade de instalação depende da sua conexão com a Internet.

A instalação do projeto Laravel está concluída. OK, continuar!.

Segundo passo: Instalando Shadcn/ui no projeto laravel

Ainda no mesmo terminal. Primeiro digite o comando abaixo:

cd laravel-shadcn
npx shadcn-ui@latest init

Nesse caso, aparecerá uma solicitação e preencha de acordo com sua necessidade. como o exemplo a seguir.

Would you like to use TypeScript (recommended)? no 
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › resources/css/app.css
Do you want to use CSS variables for colors? › yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/Components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no

Se você for um usuário datilografado, poderá escolher sim, OK, Próximo. Vá para vscode ou de acordo com seu editor de código favorito. aqui eu uso vscode então é só usar o seguinte comando

cd laravel-shadcn

code .

Abre automaticamente o vscode e abre seu projeto laravel. Nesse caso, a próxima etapa é abrir o arquivo app.css na pasta resource/css/app.css para garantir que o shadcnui foi instalado com sucesso em nosso projeto Laravel.

Na imagem acima, o shadcn foi instalado com sucesso em nosso projeto Laravel.

Explicação:

• Shadcn atualizará automaticamente o arquivo app.css
• Quando precisamos de componentes como botões, alertas, tabelas, etc. então precisamos instalá-lo através do terminal raiz do seu projeto laravel. (Requer conexão com a internet)
• Todos os componentes que você precisa podem ser vistos no site oficial do ShadcnUI
• Quando terminar de instalar os componentes, geraremos automaticamente um novo arquivo na pasta resources/js/Components/ui/Button.jsx. Também podemos modificar este arquivo de acordo com nossos desejos.

Etapa três: certifique-se de que o Shadcn esteja instalado
Para garantir que o ShadcnUI foi instalado podemos dar um comando no terminal. ou seja, por exemplo, instalaremos o componente de botão, o comando é: npx shadcn-ui@latest add button pode ser visto na imagem abaixo

Em seguida abra o arquivo Welcome.jsx e siga como na imagem abaixo.

Se já estiver. abra dois terminais com o mesmo diretório, nomeadamente laravel-shadcn

Terminal 1

npm run dev

Terminal 2

php artisan serve

Em seguida, abra-o no navegador e o componente do botão aparecerá, cujo padrão é de cor Escura.