Actualmente existen muchos marcos CSS como Bootstrap, Bulma, Semantic UI, etc. lo que puede acelerar la construcción de una pantalla (interfaz de usuario). Una de las herramientas CSS que está de moda actualmente es Shadcn/ui, ¿qué era antes?

En el sitio web oficial Shadcn/ui afirma

“una colección de componentes reutilizables que podemos copiar y pegar en nuestras aplicaciones”.

Entonces, shadcn/ui es una colección de componentes reutilizables en vistas, creados con TailwindCSS y RadixUI. Actualmente admite varios marcos como Next.js, Laravel, etc. se puede ver en el sitio web oficial Shadcn/ui.

De los muchos marcos que son compatibles. Nuestro objetivo principal es cómo instalar Shadcn/ui en Laravel React, usando Laravel Breeze.

Primer paso: instalar el proyecto laravel.

laravel new laravel-shadcn

Aquí utilizamos el instalador de Laravel (global). En la siguiente etapa se nos pedirá que elijamos una opción como en la imagen a continuación

Complete según las necesidades de su proyecto. Si es así, espere hasta que se complete la instalación. La velocidad de instalación depende de tu conexión a Internet.

La instalación del proyecto Laravel está completa. ¡OK, continuar!.

Segundo paso: Instalar Shadcn/ui en el proyecto laravel

Aún en la misma terminal. Primero escriba el siguiente comando:

cd laravel-shadcn
npx shadcn-ui@latest init

Si es así, aparecerá una solicitud y complétala según tus necesidades. como el siguiente ejemplo.

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

Si es un usuario de mecanografiado, puede elegir Sí, Aceptar, Siguiente. Vaya a vscode o según su editor de código favorito. aquí uso vscode y luego solo uso el siguiente comando

cd laravel-shadcn

code .

Abre automáticamente vscode y abre su proyecto laravel. Si es así, el siguiente paso es abrir el archivo app.css en la carpeta recurso/css/app.css para garantizar que shadcnui se haya instalado correctamente en nuestro proyecto Laravel.

En la imagen de arriba, shadcn se instaló exitosamente en nuestro proyecto Laravel.

Explicación :

• Shadcn actualizará automáticamente el archivo app.css
• Cuando necesitamos componentes como botones, alertas, tablas, etc. entonces necesitamos instalarlo a través de la terminal raíz de su proyecto laravel. (Requiere conexión a Internet)
• Todos los componentes que necesitas los puedes ver en el sitio web oficial de ShadcnUI
• Cuando haya terminado de instalar los componentes, generaremos automáticamente un nuevo archivo en la carpeta resources/js/Components/ui/Button.jsx. También podremos modificar este archivo según nuestros deseos.

Paso tres: Asegúrate de que Shadcn esté instalado
Para asegurarnos de que ShadcnUI se haya instalado, podemos dar un comando en la terminal. es decir, por ejemplo, instalaremos el componente del botón, el comando es: npx shadcn-ui@latest add button se puede ver en la imagen a continuación

Luego abra el archivo Welcome.jsx y siga como se muestra en la imagen a continuación.

Si ya lo es. abra dos terminales con el mismo directorio, a saber, laravel-shadcn

Terminal 1

npm run dev

Terminal 2

php artisan serve

Luego ábrelo en el navegador y aparecerá el componente del botón cuyo predeterminado está coloreado en Oscuro.