Derzeit gibt es viele CSS-Frameworks wie Bootstrap, Bulma, Semantic UI usw. Dies kann den Aufbau einer Anzeige (Benutzeroberfläche) beschleunigen. Eines der CSS-Tools, das derzeit im Trend liegt, ist Shadcn/ui. Was ist das vorher?

Auf der offiziellen Website Shadcn/ui heißt es

„Eine Sammlung wiederverwendbarer Komponenten, die wir kopieren und in unsere Apps einfügen können.“

Shadcn/ui ist also eine Sammlung wiederverwendbarer Komponenten in Ansichten, die mit TailwindCSS und RadixUI erstellt wurden. Derzeit werden mehrere Frameworks wie Next.js, Laravel usw. unterstützt. kann auf der offiziellen Website Shadcn/ui eingesehen werden.

Von den vielen Frameworks, die unterstützt werden. Unser Hauptziel ist die Installation von Shadcn/ui auf Laravel React mit Laravel Breeze.

Erster Schritt: Installieren Sie das Laravel-Projekt.

laravel new laravel-shadcn

Hier verwenden wir den Laravel-Installer (global). Im nächsten Schritt werden wir aufgefordert, eine Option auszuwählen, wie im Bild unten

Füllen Sie entsprechend Ihren Projektanforderungen aus. Wenn ja, warten Sie, bis die Installation abgeschlossen ist. Die Installationsgeschwindigkeit hängt von Ihrer Internetverbindung ab.

Die Installation des Laravel-Projekts ist abgeschlossen. OK Weiter!.

Zweiter Schritt: Shadcn/ui im ​​Laravel-Projekt installieren

Immer noch im selben Terminal. Geben Sie zunächst den folgenden Befehl ein:

cd laravel-shadcn
npx shadcn-ui@latest init

Wenn ja, erscheint eine Anfrage, die Sie entsprechend Ihren Anforderungen ausfüllen können. wie im folgenden Beispiel.

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

Wenn Sie ein Typoskript-Benutzer sind, können Sie „Ja“, „OK“, „Weiter“ wählen. Gehen Sie zu vscode oder entsprechend Ihrem bevorzugten Code-Editor. Hier verwende ich vscode und verwende dann einfach den folgenden Befehl

cd laravel-shadcn

code .

Öffnet automatisch vscode und öffnet Ihr Laravel-Projekt. Wenn ja, besteht der nächste Schritt darin, die Datei app.css im Ordner „resource/css/app.css“ zu öffnen, um sicherzustellen, dass shadcnui erfolgreich in unserem Laravel-Projekt installiert wurde.

Im Bild oben wurde shadcn erfolgreich auf unserem Laravel-Projekt installiert.

Erläuterung :

• Shadcn aktualisiert die Datei app.css automatisch
• Wenn wir Komponenten wie Schaltflächen, Warnungen, Tabellen usw. benötigen. Dann müssen wir es über das Root-Terminal Ihres Laravel-Projekts installieren. (Erfordert Internetverbindung)
• Alle benötigten Komponenten finden Sie auf der offiziellen ShadcnUI-Website
• Wenn Sie die Installation der Komponenten abgeschlossen haben, generieren wir automatisch eine neue Datei im Ordner resources/js/Components/ui/Button.jsx. Wir können diese Datei auch nach unseren Wünschen ändern.

Schritt drei: Stellen Sie sicher, dass Shadcn installiert ist
Um sicherzustellen, dass ShadcnUI installiert wurde, können wir im Terminal einen Befehl eingeben. Das heißt, wir werden beispielsweise die Schaltflächenkomponente installieren. Der Befehl lautet: npx shadcn-ui@latest Die Schaltfläche zum Hinzufügen ist im Bild unten zu sehen

Öffnen Sie dann die Datei Welcome.jsx und folgen Sie den Anweisungen im Bild unten.

Wenn es schon ist. Öffnen Sie zwei Terminals mit demselben Verzeichnis, nämlich laravel-shadcn

Terminal 1

npm run dev

Terminal 2

php artisan serve

Öffnen Sie es dann im Browser und die Schaltflächenkomponente wird angezeigt, die standardmäßig dunkel gefärbt ist.