Installez Shadcn/ui avec Laravel + React❤️

Actuellement, il existe de nombreux frameworks CSS tels que Bootstrap, Bulma, Semantic UI etc. ce qui peut accélérer la création d’un affichage (interface utilisateur). L'un des outils CSS actuellement à la mode est Shadcn/ui. Qu'est-ce que c'était avant ?

.

Sur le site officiel Shadcn/ui déclare

« une collection de composants réutilisables que nous pouvons copier et coller dans nos applications. »

Shadcn/ui est donc un ensemble de composants qui peuvent être réutilisés dans des vues, construits à l'aide de TailwindCSS et RadixUI. Actuellement, il prend en charge plusieurs frameworks tels que Next.js, Laravel, etc. peut être vu sur le site officiel Shadcn/ui.

Parmi les nombreux frameworks pris en charge. Notre objectif principal est de savoir comment installer Shadcn/ui sur Laravel React, en utilisant Laravel Breeze.

Première étape : installer le projet laravel.

laravel new laravel-shadcn

Ici, nous utilisons l'installateur Laravel (global). À l'étape suivante, il nous sera demandé de choisir une option comme dans l'image ci-dessous

Remplissez en fonction des besoins de votre projet. Si tel est le cas, attendez la fin de l'installation. La vitesse d'installation dépend de votre connexion Internet.

L'installation du projet Laravel est terminée. OK, continuez !.

Deuxième étape : Installer Shadcn/ui sur le projet Laravel

Toujours dans le même terminal. Tout d’abord, tapez la commande ci-dessous :

cd laravel-shadcn
npx shadcn-ui@latest init

Si tel est le cas, une demande apparaîtra et remplissez-la selon vos besoins. comme l'exemple suivant.

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 vous êtes un utilisateur dactylographié, vous pouvez choisir oui, OK, Suivant. Accédez à vscode ou selon votre éditeur de code préféré. ici j'utilise vscode puis utilisez simplement la commande suivante

cd laravel-shadcn

code .

Il ouvrira automatiquement vscode ainsi que votre projet Laravel. Si tel est le cas, l'étape suivante consiste à ouvrir le fichier app.css dans le dossier resource/css/app.css pour vous assurer que shadcnui a été installé avec succès dans notre projet Laravel.

Dans l'image ci-dessus, shadcn a été installé avec succès sur notre projet Laravel.

Explication :

• Shadcn mettra automatiquement à jour le fichier app.css
• Lorsque nous avons besoin de composants tels que des boutons, des alertes, des tableaux, etc. nous devons ensuite l'installer via le terminal racine de votre projet Laravel. (Nécessite une connexion Internet)
• Tous les composants dont vous avez besoin peuvent être consultés sur le site officiel de ShadcnUI
• Lorsque vous aurez fini d'installer les composants, nous générerons automatiquement un nouveau fichier dans le dossier resources/js/Components/ui/Button.jsx. Nous pourrons également modifier ce fichier selon nos souhaits.

Troisième étape : assurez-vous que Shadcn est installé
Pour nous assurer que ShadcnUI a été installé, nous pouvons donner une commande dans le terminal. à savoir, par exemple, nous allons installer le composant bouton, la commande est : npx shadcn-ui@latest add button peut être vu dans l'image ci-dessous

Ouvrez ensuite le fichier Welcome.jsx et suivez comme dans l'image ci-dessous.

Si c'est le cas. ouvrez deux terminaux avec le même répertoire, à savoir laravel-shadcn

Terminal 1

npm run dev

Terminal 2

php artisan serve

Ouvrez-le ensuite dans le navigateur et un composant de bouton apparaîtra qui par défaut est de couleur foncée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!