Blog

Shadcn/UI: Einführung & Tutorial für Anfänger

Audrey Lopez

Audrey Lopez

14 June 2025

Shadcn/UI: Einführung & Tutorial für Anfänger

Für Webentwickler ist die Suche nach dem perfekten UI-Toolkit ein ständiges Bestreben. Seit Jahren verlassen sich React-Entwickler auf traditionelle Komponentenbibliotheken wie Material-UI (MUI), Ant Design und Chakra UI. Diese Bibliotheken bieten eine Fülle vorgefertigter Komponenten und versprechen, die Entwicklung zu beschleunigen. Sie bringen jedoch oft einen Kompromiss mit sich: mangelnde Kontrolle, Stilüberschreibungen, die sich wie ein Kampf anfühlen, und aufgeblähte Bundle-Größen.

Hier kommt Shadcn UI, ein Paradigmenwechsel, der die React-Community im Sturm erobert hat. Es ist keine Komponentenbibliothek, wie Sie es gewohnt sind; es ist etwas Besseres. Es ist eine Sammlung wunderschön gestalteter, zugänglicher und unendlich wiederverwendbarer Komponenten, die Sie nicht als Abhängigkeit von npm installieren – Sie kopieren sie direkt in Ihr Projekt.

Dieses umfassende, 4000 Wörter lange Tutorial dient als Ihr ultimativer Leitfaden und führt Sie vom absoluten Anfänger zum sicheren Shadcn UI-Praktiker. Wir werden seine grundlegende Philosophie erkunden, eine detaillierte Einrichtung durchgehen, komplexe UIs erstellen, fortgeschrittenes Theming und Formularverarbeitung meistern und Best Practices für große Anwendungen diskutieren. Bereiten Sie sich darauf vor, Ihre Erwartungen an ein UI-Toolkit neu zu überdenken.

💡
Möchten Sie ein großartiges API-Testtool, das wunderschöne API-Dokumentation generiert?

Möchten Sie eine integrierte All-in-One-Plattform für Ihr Entwicklerteam, um mit maximaler Produktivität zusammenzuarbeiten?

Apidog erfüllt alle Ihre Anforderungen und ersetzt Postman zu einem viel günstigeren Preis!
button

Die Shadcn UI-Philosophie – Eine neue Art des Bauens

Bevor Sie eine einzige Codezeile schreiben, ist es von größter Bedeutung zu verstehen, warum Shadcn UI existiert und welche Probleme es löst. Das Erfassen dieser Kernphilosophie ist der Schlüssel zur Entfaltung ihres vollen Potenzials.

Was Shadcn UI nicht ist

Was Shadcn UI ist

Der Hauptvorteil dieses Modells ist die Verschmelzung von Geschwindigkeit und Kontrolle. Sie erhalten die anfängliche Geschwindigkeit der Verwendung vorgefertigter Komponenten, ohne die langfristige Flexibilität und Wartbarkeit zu opfern, die mit dem Besitz Ihres eigenen Codes einhergeht.

Die Bühne bereiten – Projekt-Setup und Installation

Gehen wir von der Theorie zur Praxis über. Wir werden ein neues Projekt von Grund auf einrichten. Für diesen Leitfaden werden wir hauptsächlich Next.js verwenden, da seine Serverkomponenten und das dateibasierte Routing perfekt zum Shadcn UI-Ethos passen. Wir werden auch kurz auf das Setup für Vite eingehen.

Schritt 1: Umgebungsanforderungen

Stellen Sie sicher, dass Ihre Entwicklungsumgebung bereit ist. Sie benötigen:

Schritt 2: Erstellen einer neuen Next.js-Anwendung

Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um ein neues Next.js-Projekt zu bootstrappen.Bash

npx create-next-app@latest my-pro-shadcn-app --typescript --tailwind --eslint

Dieser Befehl erstellt ein Gerüst für eine neue Anwendung in einem Verzeichnis namens my-pro-shadcn-app. Wir haben einige wichtige Flags hinzugefügt:

Der Installer wird Ihnen einige Fragen stellen. Dies sind die empfohlenen Optionen für ein modernes Next.js 14+ Setup:

✔ Would you like to use `src/` directory? … No / **Yes**
✔ Would you like to use App Router? (recommended) … No / **Yes**
✔ Would you like to customize the default import alias? … **No** / Yes

Die Verwendung des App Routers ist Standardpraxis, und das Verzeichnis src/ hilft bei der Organisation des Codes. Sobald Sie fertig sind, navigieren Sie in Ihr neues Projekt:Bash

cd my-pro-shadcn-app

Schritt 3: Der init-Befehl – Shadcn UI zum Leben erwecken

Dies ist der wichtigste Schritt. Shadcn UI bietet ein CLI-Tool zur Konfiguration Ihres Projekts. Führen Sie den folgenden Befehl aus dem Stammverzeichnis Ihres Projekts aus:Bash

npx shadcn-ui@latest init

Dies löst einen interaktiven Fragebogen aus, um Ihr Projekt einzurichten. Schauen wir uns jede Frage und ihre Bedeutung im Detail an:

Nachdem Sie bestätigt haben, vollbringt das CLI seine Magie:

  1. Installiert Abhängigkeiten: Es fügt notwendige Pakete wie tailwindcss-animate und class-variance-authority hinzu.
  2. Erstellt components.json: Speichert Ihre Konfigurationsoptionen.
  3. Aktualisiert tailwind.config.ts: Fügt das Shadcn UI-Plugin und die Theming-Konfiguration ein.
  4. Aktualisiert globals.css: Fügt einen großen Block von CSS-Variablen hinzu, die Ihre gesamte Farbpalette, Border Radii und mehr definieren.
  5. Erstellt lib/utils.ts: Diese Datei exportiert eine cn-Hilfsfunktion, die ein cleveres Dienstprogramm zum bedingten Zusammenführen von Tailwind CSS-Klassen ist.

Ihr Projekt ist nun vollständig konfiguriert.

(Alternative: Vite Setup)

Wenn Sie Vite mit React verwenden, ist der Prozess sehr ähnlich. Nachdem Sie ein Vite + React + TS-Projekt eingerichtet haben, würden Sie Tailwind CSS manuell installieren und dann npx shadcn-ui@latest init ausführen. Das CLI ist intelligent genug, um ein Vite-Setup zu erkennen und wird etwas andere Fragen zu Dateispeicherorten stellen (z. B. index.css anstelle von globals.css).

Eine UI erstellen – Von einfachen Komponenten zu komplexen Layouts

Nachdem das Setup abgeschlossen ist, können wir mit dem Bauen beginnen. Der Kernarbeitsablauf ist: Bedarf identifizieren, Komponente hinzufügen, verwenden.

Schritt 4: Hinzufügen und Verwenden Ihrer ersten Komponenten

Bereinigen wir den Standard-Boilerplate-Code von Next.js und erstellen eine einfache Oberfläche.

1. Eine Schaltfläche hinzufügen:Bash

npx shadcn-ui@latest add button

Beobachten Sie, was passiert: Eine neue Datei, src/components/ui/button.tsx, wird erstellt. Dies ist Ihre Schaltfläche. Sie besitzen sie.

2. Eine Card hinzufügen:Bash

npx shadcn-ui@latest add card

Dieser Befehl ist interessanter. Er erstellt src/components/ui/card.tsx. Wenn Sie diese Datei untersuchen, sehen Sie, dass sie mehrere Komponenten exportiert: Card, CardHeader, CardTitle, CardDescription, CardContent und CardFooter. Dies ist ein gängiges Muster für zusammengesetzte Komponenten.

3. Die UI erstellen:

Öffnen Sie nun src/app/page.tsx und ersetzen Sie dessen Inhalt durch Folgendes:TypeScript

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input"; // Das fügen wir als Nächstes hinzu
import { Label } from "@/components/ui/label";   // Und das

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center bg-background p-8">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-2xl">Projekt erstellen</CardTitle>
          <CardDescription>
            Stellen Sie Ihr neues Projekt mit einem Klick bereit.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="name">Name</Label>
            <Input id="name" placeholder="Name Ihres Projekts" />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="framework">Framework</Label>
            {/* Das ersetzen wir später durch eine Select-Komponente */}
            <Input id="framework" placeholder="z.B. Next.js" />
          </div>
        </CardContent>
        <CardFooter>
          <Button className="w-full">Bereitstellen</Button>
        </CardFooter>
      </Card>
    </main>
  );
}

Unser Code wird noch nicht laufen, da uns die Komponenten Input und Label fehlen. Fügen wir sie hinzu:Bash

npx shadcn-ui@latest add input
npx shadcn-ui@latest add label

Führen Sie nun Ihren Entwicklungsserver aus:Bash

npm run dev

Navigieren Sie zu http://localhost:3000. Sie sehen ein sauberes, professionell aussehendes Formular innerhalb einer Card. Beachten Sie, wie wir Utility-Klassen wie w-full, max-w-md und grid direkt in unserem JSX verwendet haben, um das Layout zu steuern. Dies ist die Stärke der Kombination von Shadcn und Tailwind CSS.

Schritt 5: Einführung komplexerer Komponenten

Statische Eingaben sind gut, aber echte Apps benötigen interaktive Elemente. Verbessern wir unser Formular.

1. Eine Select-Komponente hinzufügen: Die Eingabe "Framework" sollte ein Dropdown sein. Fügen wir die Select-Komponente hinzu. Diese ist komplexer und hat Abhängigkeiten von anderen Komponenten.Bash

npx shadcn-ui@latest add select

Das CLI ist intelligent. Es wird erkennen, dass Select eine Popover-Komponente benötigt, um zu funktionieren, und wird Sie um Erlaubnis bitten, diese und ihre Abhängigkeiten ebenfalls zu installieren. Dies ist eine fantastische Funktion, die verhindert, dass Sie Abhängigkeiten manuell verfolgen müssen.

2. Die Select-Komponente integrieren: Ersetzen Sie die Input für "Framework" in src/app/page.tsx durch die neue Select-Komponente.TypeScript

// Diese Imports oben hinzufügen
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

// ... innerhalb des CardContent
<div className="grid gap-2">
  <Label htmlFor="framework">Framework</Label>
  <Select>
    <SelectTrigger id="framework">
      <SelectValue placeholder="Framework auswählen" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="nextjs">Next.js</SelectItem>
      <SelectItem value="sveltekit">SvelteKit</SelectItem>
      <SelectItem value="astro">Astro</SelectItem>
      <SelectItem value="nuxt">Nuxt.js</SelectItem>
    </SelectContent>
  </Select>
</div>

Aktualisieren Sie Ihren Browser. Sie haben nun ein voll funktionsfähiges und zugängliches Select-Dropdown, komplett mit Animationen und korrekter Tastaturnavigation, alles dank Radix UI, das im Hintergrund arbeitet.

3. Benutzerfeedback mit Toast hinzufügen: Was passiert, wenn ein Benutzer auf "Bereitstellen" klickt? Wir sollten ihnen Feedback geben. Die Toast-Komponente ist perfekt dafür.

Fügen Sie sie zuerst hinzu:Bash

npx shadcn-ui@latest add toast

Als Nächstes müssen Sie, um Toasts zu verwenden, eine <Toaster />-Komponente zu Ihrem Root-Layout hinzufügen, damit sie überall in der App angezeigt werden kann. Öffnen Sie src/app/layout.tsx und ändern Sie es:TypeScript

import { Toaster } from "@/components/ui/toaster" // Den Toaster importieren

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster /> {/* Hier hinzufügen, direkt vor dem schließenden body */}
      </body>
    </html>
  )
}

Nun benötigen wir eine Möglichkeit, den Toast zu triggern. Wir verwenden den useToast-Hook. Aktualisieren wir src/app/page.tsx, um es zu einer Client-Komponente zu machen und den Button-Klick zu behandeln.TypeScript

'use client'; // <-- Dies ganz oben in der Datei hinzufügen

// ... andere Imports
import { useToast } from "@/components/ui/use-toast";

export default function Home() {
  const { toast } = useToast(); // Die toast-Funktion vom Hook holen

  function handleDeploy() {
    toast({
      title: "Bereitstellung geplant!",
      description: "Ihr Projekt 'Name Ihres Projekts' wird bereitgestellt.",
      duration: 5000,
    });
  }

  return (
    <main className="flex min-h-screen items-center justify-center bg-background p-8">
      <Card className="w-full max-w-md">
        {/* ... CardHeader und CardContent ... */}
        <CardFooter>
          <Button className="w-full" onClick={handleDeploy}> {/* onClick-Handler hinzufügen */}
            Bereitstellen
          </Button>
        </CardFooter>
      </Card>
    </main>
  );
}

Wenn Sie nun auf die Schaltfläche "Bereitstellen" klicken, erscheint eine elegante Benachrichtigung in der Ecke Ihres Bildschirms.

Erstellen eines professionellen Formulars mit Validierung

Die meisten realen Anwendungen erfordern eine robuste Formularverarbeitung, einschließlich clientseitiger Validierung. Der offizielle Weg, dies mit Shadcn UI zu handhaben, ist die Kombination mit react-hook-form für die Zustandsverwaltung und zod für die Schema-Validierung. Bauen wir es.

Schritt 6: Installieren der Formular-Abhängigkeiten

Installieren wir zuerst die notwendigen Bibliotheken:Bash

npm install react-hook-form zod @hookform/resolvers

Schritt 7: Hinzufügen der Shadcn Form-Komponente

Shadcn UI bietet eine spezielle Form-Komponente, die als Wrapper dient, um react-hook-form nahtlos mit Ihren UI-Komponenten zu verbinden.Bash

npx shadcn-ui@latest add form

Dadurch wird src/components/ui/form.tsx hinzugefügt. Diese Datei stellt eine Reihe kontextsensitiver Komponenten (Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage) bereit, die den Boilerplate-Code drastisch reduzieren.

Schritt 8: Erstellen des Validierungsschemas

In Ihrer src/app/page.tsx definieren wir die Form und Regeln unserer Formulardaten mithilfe von zod.TypeScript

// Diese Imports oben hinzufügen
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";

Nun erstellen wir das Schema direkt über unserer Home-Komponente:TypeScript

const formSchema = z.object({
  projectName: z.string().min(2, {
    message: "Der Projektname muss mindestens 2 Zeichen lang sein.",
  }).max(50, {
    message: "Der Projektname darf 50 Zeichen nicht überschreiten.",
  }),
  framework: z.string({
    required_error: "Bitte wählen Sie ein Framework zur Anzeige aus.",
  }),
});

Dieses Schema definiert zwei Felder: projectName muss ein String zwischen 2 und 50 Zeichen sein, und framework ist ein Pflicht-String.

Schritt 9: Verdrahtung des Formulars

Nun überarbeiten wir unsere Home-Komponente, um all diese neuen Tools zu verwenden.TypeScript

export default function Home() {
  const { toast } = useToast(); // Die toast-Funktion vom Hook holen

  // 1. Ihr Formular definieren.
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      projectName: "",
    },
  });

  // 2. Einen Submit-Handler definieren.
  function onSubmit(values: z.infer<typeof formSchema>) {
    // Etwas mit den Formularwerten machen.
    // ✅ Dies ist typensicher und validiert.
    console.log(values);
    toast({
      title: "Sie haben die folgenden Werte übermittelt:",
      description: (
        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
        </pre>
      ),
    });
  }

  // 3. Das JSX mit den Form-Komponenten von Shadcn erstellen
  return (
    <main className="flex min-h-screen items-center justify-center bg-background p-8">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-2xl">Projekt erstellen</CardTitle>
          <CardDescription>
            Stellen Sie Ihr neues Projekt mit einem Klick bereit.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
              <FormField
                control={form.control}
                name="projectName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Name</FormLabel>
                    <FormControl>
                      <Input placeholder="Name Ihres Projekts" {...field} />
                    </FormControl>
                    <FormDescription>
                      Dies ist Ihr öffentlicher Anzeigename.
                    </FormDescription>
                    <FormMessage /> {/* Zeigt Validierungsfehler an */}
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="framework"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Framework</FormLabel>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Framework auswählen" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="nextjs">Next.js</SelectItem>
                        <SelectItem value="sveltekit">SvelteKit</SelectItem>
                        <SelectItem value="astro">Astro</SelectItem>
                        <SelectItem value="nuxt">Nuxt.js</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormDescription>
                      Das Framework, das Sie bereitstellen möchten.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button type="submit" className="w-full">Bereitstellen</Button>
            </form>
          </Form>
        </CardContent>
      </Card>
    </main>
  );
}

Dies ist ein erheblicher Codeblock, aber ein unglaublich leistungsstarkes und skalierbares Muster. Die FormField-Komponente übernimmt alle Zustandsverbindungen, und FormMessage zeigt automatisch den korrekten Validierungsfehler aus Ihrem zod-Schema an, wenn ein Benutzer mit dem Feld interagiert. Versuchen Sie, das Formular mit einem leeren Projektnamen abzusenden, um die Validierung in Aktion zu sehen.

Theming und Anpassung meistern

Die wahre Stärke von Shadcn UI entfaltet sich, wenn Sie es zu Ihrem eigenen machen.

Schritt 10: Fortgeschrittenes Theming mit CSS-Variablen

Ihr gesamtes Theme wird durch CSS-Variablen in src/app/globals.css definiert. Öffnen Sie diese Datei und suchen Sie nach den Blöcken :root und .dark.CSS

/* Beispiel aus globals.css */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... und viele mehr */
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  /* ... */
}

Dark Mode implementieren:

Shadcn ist dank des .dark-Klassenblocks und der Tailwind-Strategie darkMode: "class" in tailwind.config.ts für den Dark Mode vorkonfiguriert. Alles, was Sie brauchen, ist eine Möglichkeit, die Klasse dark auf dem <html>-Element umzuschalten. Eine beliebte Bibliothek dafür ist next-themes.

  1. Installieren Sie sie: npm install next-themes
  2. Erstellen Sie eine ThemeProvider-Komponente (src/components/theme-provider.tsx): TypeScript
"use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
  1. Umschließen Sie Ihr RootLayout mit diesem Provider (src/app/layout.tsx): TypeScript
import { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from "@/components/ui/toaster" // Den Toaster importieren

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
          <Toaster /> {/* Hier hinzufügen, direkt vor dem schließenden body */}
        </ThemeProvider>
      </body>
    </html>
  )
}
  1. Erstellen Sie schließlich eine Umschaltfläche (z. B. src/components/mode-toggle.tsx): TypeScript
"use client"
import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"

export function ModeToggle() {
  const { theme, setTheme } = useTheme()

  return (
    <Button
      variant="outline"
      size="icon"
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
    </Button>
  )
}

Sie können diese <ModeToggle /> nun überall in Ihrer App platzieren, um eine systembewusste, vom Benutzer überschreibbare Dark Mode-Umschaltung zu erhalten.

Schritt 11: Anpassen des Komponenten-Quellcodes

Das ist die ultimative Superkraft. Nehmen wir an, Sie möchten eine neue Erfolgs-Variante für Ihre Schaltfläche, die einen grünen Hintergrund hat.

Öffnen Sie src/components/ui/button.tsx. Suchen Sie die Definition von buttonVariants. Es verwendet cva (Class Variance Authority). Fügen Sie einfach eine neue Variante hinzu:TypeScript

const buttonVariants = cva(
  // ... Basisstile
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        success: "bg-green-600 text-white hover:bg-green-600/90", // Unsere neue Variante
      },
      // ... Größenvarianten
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

Das ist alles. Sie können es nun in Ihrem Code verwenden: <Button variant="success">Erfolg</Button>. Sie mussten keine komplexen CSS-Überschreibungen schreiben. Sie haben einfach den Quellcode der Komponente selbst bearbeitet. Dieser Workflow ist einfach, vorhersehbar und unglaublich leistungsstark.

Teil 6: Best Practices und der Weg nach vorn

Wenn Ihre Anwendung wächst, sollten Sie einige Best Practices beachten.

Fazit: Sie sind der Bibliotheksautor

Sie sind nun von der Kernphilosophie von Shadcn UI bis zur Implementierung fortgeschrittener, realer Muster gereist. Sie haben gesehen, dass seine wahre Innovation nicht nur die Komponenten selbst sind, sondern der Paradigmenwechsel, den es darstellt. Es wandelt Entwickler von bloßen Konsumenten einer Bibliothek zu Kuratoren und Eigentümern ihres eigenen UI-Toolkits.

Indem es Ihnen den rohen Quellcode gibt, auf den soliden Grundlagen von Tailwind CSS und Radix UI aufbaut und eine nahtlose CLI-Erfahrung bietet, erreicht Shadcn UI die perfekte Balance zwischen anfänglicher Entwicklungsgeschwindigkeit und langfristiger Wartbarkeit sowie kreativer Freiheit. Sie sind nicht länger durch das Designsystem eines anderen eingeschränkt. Die Komponenten in Ihrem Projekt gehören Ihnen – zum Ändern, Erweitern und Perfektionieren.

Die Zukunft der UI Ihrer Anwendung liegt nicht mehr in den Händen einer Drittanbieter-Abhängigkeit; sie befindet sich direkt in Ihrem components-Ordner. Viel Spaß beim Bauen.

💡
Möchten Sie ein großartiges API-Testtool, das wunderschöne API-Dokumentation generiert?

Möchten Sie eine integrierte All-in-One-Plattform für Ihr Entwicklerteam, um mit maximaler Produktivität zusammenzuarbeiten?

Apidog erfüllt alle Ihre Anforderungen und ersetzt Postman zu einem viel günstigeren Preis!
button

Praktizieren Sie API Design-First in Apidog

Entdecken Sie eine einfachere Möglichkeit, APIs zu erstellen und zu nutzen

Kostenlos registrierenDownload