Maison > Article > interface Web > 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 :
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!