inatorsui

Inators UI

Inators UI ist eine UI -Bibliothek, die auf Shadcn UI basiert und die Entwicklung stilvoller und reaktionsschneller Benutzeroberflächen in nächsten.js 14 -Projekten vereinfacht.

Installation

Installieren und konfigurieren Sie Shadcn UI.

Projekt erstellen

Erstellen Sie zunächst ein neues Next.js-Projekt mit Create-Next-App:

npx create-next-app@latest my-app

Führen Sie die CLI

Führen Sie den Befehl Shadcn UI Init aus, um Ihr Projekt einzurichten:

npx shadcn-ui@latest init

Inators UI -Verwendung

Installieren und konfigurieren Sie Shadcn UI -Komponenten.

Komponenten installieren

Beginnen Sie mit der Installation einer neuen Komponente mithilfe von Befehlen aus der Dropdown-Menu der Komponentenseite:

npx shadcn-ui@latest add button dropdown-menu

Kopieren Sie den Code von der Seite der Komponenten

Erstellen Sie eine neue Datei mit Ihrem Code -Editor, z. B. ButtonOptions.tsx , in Ihrem Komponentenordner und kopieren Sie den Code von Komponentenseite.

Importieren Sie die erstellte Komponente, um sie zu verwenden

Fügen Sie die Komponente zum Verwenden ButtonOptions.tsx hinzu.TSX:

Beispielcode

 import ButtonOptions from "@/components/ButtonOptions" ;
// Your component usage code here