UI Component Toolkit: @nootcode/ui

Eine einfache, wiederverwendbare und anpassbare UI-Komponentenbibliothek, erstellt mit React, TypeScript und TailwindCSS. Gebaut mit tsup.

Installation

Um die Komponentenbibliothek in deinem Projekt zu verwenden, installiere sie über npm oder deinen bevorzugten Paketmanager:

npm install @nootcode/ui

Verwendung

Importiere die benötigten Komponenten direkt aus dem Paket.

import { Button, Card, CardHeader, CardTitle, CardContent, CardFooter, Input, Badge } from "@nootcode/ui";

Button

Der Button unterstützt die Varianten primary, secondary und outline.

<Button variant="primary">Klick mich</Button>
<Button variant="secondary">Mehr erfahren</Button>
<Button variant="outline">Abbrechen</Button>

Card

Die Card-Komponente ist in mehrere Teile unterteilt, um maximale Flexibilität zu gewährleisten.

<Card>
  <CardHeader>
    <CardTitle>Titel der Karte</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Der Hauptinhalt deiner Karte kommt hier hin.</p>
  </CardContent>
  <CardFooter>
    <Button>Aktion</Button>
  </CardFooter>
</Card>

Input

Ein anpassbares Input-Feld mit optionalem Label und Icon.

import { Mail } from "lucide-react";

<Input label="Dein Name" placeholder="Max Mustermann" />

<Input 
  label="E-Mail" 
  placeholder="[email protected]"
  icon={<Mail size={16} />} 
/>

Badge

Badges zur Hervorhebung von Informationen mit verschiedenen Farbvarianten.

<Badge variant="blue">Info</Badge>
<Badge variant="green">Erfolgreich</Badge>
<Badge variant="red">Fehler</Badge>

Bibliothek bauen

Um die Bibliothek für die Veröffentlichung zu bauen, führe den folgenden Befehl im Stammverzeichnis des Projekts aus:

npm run build

Dieser Befehl verwendet tsup, um den Code in den dist/-Ordner zu kompilieren. Er generiert:

• ESM-Module
• CommonJS-Module
• TypeScript-Deklarationsdateien (.d.ts)

package.json Konfiguration

Für eine erfolgreiche Veröffentlichung sollte deine package.json die folgenden Felder enthalten:

{
  "name": "@nootcode/ui",
  "version": "0.1.0",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "tsup"
  },
  "peerDependencies": {
    "react": ">=18",
    "react-dom": ">=18"
  },
  "devDependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "tsup": "...",
    "typescript": "..."
  }
}