Blog

Was ist HeroUI? HeroUI Tutorial für Anfänger

Mark Ponomarev

Mark Ponomarev

12 June 2025

Was ist HeroUI? HeroUI Tutorial für Anfänger
💡
Möchten Sie ein großartiges API-Testtool, das schöne API-Dokumentation generiert?

Möchten Sie eine integrierte All-in-One-Plattform, damit Ihr Entwicklerteam mit maximaler Produktivität zusammenarbeiten kann?

Apidog erfüllt all Ihre Anforderungen und ersetzt Postman zu einem viel günstigeren Preis!
Schaltfläche

Für Frontend-Entwickler war die Nachfrage nach ästhetisch ansprechenden, hochperformanten und tiefgreifend anpassbaren Benutzeroberflächen nie größer. Entwickler suchen ständig nach Tools, die ihren Workflow beschleunigen, ohne dabei an Qualität oder kreativer Kontrolle einzubüßen. Während monolithische UI-Komponentenbibliotheken der Community jahrelang gute Dienste geleistet haben, entsteht ein neues Paradigma – eines, das Entwicklerverantwortung, Modularität und nahtlose Integration mit modernen Frameworks priorisiert. Innerhalb dieses neuen Paradigmas findet HeroUI seine Nische.

HeroUI ist nicht nur eine weitere Komponentenbibliothek; es ist eine sorgfältig ausgearbeitete Sammlung wiederverwendbarer UI-Komponenten, die direkt in Ihre Projekte integriert werden können. Es vertritt eine Philosophie, die Entwicklern die ultimative Kontrolle über ihre Codebasis gibt. Anstatt undurchsichtige Komponenten aus einem Node-Modul zu importieren, verwenden Sie die HeroUI Command Line Interface (CLI), um den tatsächlichen Quellcode der benötigten Komponenten in Ihr Projekt einzufügen. Diese "Copy-and-Paste"-Evolution bedeutet, dass jede Schaltfläche, jede Karte und jedes Dialogfeld Teil Ihrer eigenen Anwendung wird, bereit, angepasst, neu gestaltet und an Ihre spezifischen Bedürfnisse angepasst zu werden.

Aufgebaut auf den Schultern von Giganten wie React, Tailwind CSS und Next.js, bietet HeroUI die Bausteine für die Erstellung schöner, zugänglicher und responsiver Benutzeroberflächen. Es wurde für den modernen Entwickler entwickelt, der sowohl Geschwindigkeit als auch Spezifität schätzt, und bietet einen robusten Ausgangspunkt, der Sie nicht in ein starres Designsystem einsperrt. Dieser Artikel dient als umfassender Leitfaden zum Verständnis der Kernprinzipien von HeroUI, zur Installation in Ihrem Projekt, zur Anpassung seines Aussehens und Verhaltens und zur Nutzung seiner leistungsstarken CLI zum Erstellen der nächsten Generation von Webanwendungen.

Teil 1: HeroUI zerlegen – Philosophie und Kernfunktionen

Bevor wir uns mit den technischen Details der Installation und Nutzung befassen, ist es entscheidend, das "Warum" hinter HeroUI zu verstehen. Welche Probleme löst es und was macht es zu einer überzeugenden Wahl in einem überfüllten Bereich von UI-Tools?

Die Philosophie: Eigentum und kompromisslose Anpassung

Der grundlegende Unterschied zwischen HeroUI und traditionellen UI-Bibliotheken wie Material-UI oder Ant Design liegt im Konzept des Eigentums. Wenn Sie eine traditionelle Bibliothek installieren, fügen Sie eine Abhängigkeit zu Ihrer package.json hinzu. Ihre Anwendung importiert dann vorkompilierte Komponenten aus diesem Paket. Obwohl dies bequem ist, birgt es mehrere Nachteile:

  1. Begrenzte Anpassung: Styling-Überschreibungen können komplex sein und erfordern oft, dass Sie mit !important-Tags oder komplizierten Theme-Provider-Konfigurationen gegen die Standard-Styles der Bibliothek ankämpfen müssen.
  2. Black-Box-Komponenten: Die interne Logik der Komponenten ist im Ordner node_modules verborgen. Das Debugging unerwarteten Verhaltens oder das Verständnis der inneren Funktionsweise wird erheblich schwieriger.
  3. Aufblähen der Bundle-Größe: Sie importieren oft die gesamte Bibliothek oder zumindest einen erheblichen Teil davon, selbst wenn Sie nur eine Handvoll Komponenten verwenden, was potenziell die endgültige Bundle-Größe Ihrer Anwendung erhöht.
  4. Abhängigkeits-Hölle: Sie sind an den Update-Zyklus der Bibliothek und ihre Abhängigkeiten gebunden. Eine breaking change in der Bibliothek kann einen größeren Refaktor in Ihrer Anwendung erzwingen.

HeroUI umgeht diese Probleme vollständig. Indem die CLI den Quellcode der Komponente direkt in das Verzeichnis Ihres Projekts platziert (z. B. /components/ui), ermöglicht es Ihnen dies auf verschiedene wichtige Weisen:

Diese Philosophie richtet sich an Entwickler und Teams, die ein einzigartiges Designsystem für ihr Produkt erstellen möchten, ohne bei Null anzufangen. Sie bietet die grundlegenden, ungestylten (oder leicht gestylten) Primitiven, und Sie liefern die Markenidentität.

Wichtige Funktionen im Überblick

HeroUI ist mehr als nur seine Installationsmethode. Es ist vollgepackt mit Funktionen, die für einen modernen Entwicklungs-Workflow entwickelt wurden.

Für wen ist HeroUI geeignet?

HeroUI ist eine ideale Wahl für einen bestimmten Typ von Entwickler und Projekt:

Es ist möglicherweise weniger geeignet für absolute Anfänger, die eine eher "Out-of-the-box"-Lösung mit allem Drum und Dran bevorzugen, bei der minimale Konfiguration erforderlich ist. Die Stärke von HeroUI liegt in seiner Konfigurierbarkeit, die ein grundlegendes Verständnis von Tailwind CSS und der modernen Frontend-Entwicklungsumgebung erfordert.

Teil 2: Erste Schritte – Eine detaillierte Anleitung zur Installation und Einrichtung

Nachdem wir nun die Philosophie verstanden haben, krempeln wir die Ärmel hoch. Dieser Abschnitt bietet eine sorgfältige Schritt-für-Schritt-Anleitung zur Integration von HeroUI in ein neues oder bestehendes Projekt. Die empfohlene und effizienteste Methode ist die Verwendung der offiziellen HeroUI CLI.

Voraussetzungen

Stellen Sie vor Beginn sicher, dass Ihre Entwicklungsumgebung die folgenden Anforderungen erfüllt:

npx create-next-app@latest my-heroui-app

Während der Next.js-Einrichtung wird empfohlen, TypeScript und Tailwind CSS zu wählen, da diese grundlegend für das HeroUI-Ökosystem sind.

Der HeroUI CLI init Befehl: Ihr Ausgangspunkt

Der init Befehl ist der magische Einstiegspunkt in die Welt von HeroUI. Er inspiziert intelligent Ihr Projekt, stellt Ihnen eine Reihe von Fragen und konfiguriert dann automatisch alles, was Sie benötigen.

Navigieren Sie in Ihr Projektverzeichnis: Bash

cd my-heroui-app

Führen Sie nun den Initialisierungsbefehl aus: Bash

npx heroui-cli@latest init

Die CLI führt Sie nun durch den Einrichtungsprozess. Lassen Sie uns jede Frage, die sie stellt, und die Bedeutung Ihrer Antworten aufschlüsseln.

1. "Welchen Stil möchten Sie verwenden?"

2. "Welche Farbe möchten Sie als Grundfarbe verwenden?"

3. "Wo befindet sich Ihre globale CSS-Datei?"

4. "Möchten Sie CSS-Variablen für Farben verwenden?"

5. "Wo befindet sich Ihre tailwind.config.js Datei?"

6. "Import-Alias für Komponenten konfigurieren:"

7. "Import-Alias für Utilities konfigurieren:"

8. "Verwenden Sie React Server Components?"

Nachdem Sie alle Fragen beantwortet haben, wird die CLI ihre Magie entfalten. Sie wird:

Ihr Projekt ist nun vollständig konfiguriert und bereit für HeroUI.

Anatomie der Änderungen

Schauen wir uns die wichtigsten Dateien, die die CLI geändert oder erstellt hat, genauer an.

components.json

Diese Datei ist das Manifest für HeroUI in Ihrem Projekt. Sie speichert die Entscheidungen, die Sie während des init-Prozesses getroffen haben, und teilt der CLI mit, wie Ihr Projekt konfiguriert ist. JSON

{
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "utils": "@/lib/utils",
    "components": "@/components"
  }
}

Sie sollten diese Datei selten manuell bearbeiten müssen, aber es ist hilfreich, ihren Zweck zu verstehen. Sie ist das Gehirn hinter den Operationen der CLI.

tailwind.config.js

Ihre Tailwind-Konfiguration wird erweitert und sieht in etwa so aus. Die wichtigsten Ergänzungen sind die theme-Erweiterungen und das tailwindcss-animate-Plugin. JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        // ... und viele weitere Farbdefinitionen, die mit CSS-Variablen verknüpft sind
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ...
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        // ... Keyframes für Animationen
      },
      animation: {
        // ... Animations-Utilities
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

Beachten Sie, wie Farben wie primary nicht mit einem Hex-Code, sondern mit hsl(var(--primary)) definiert sind. Dies weist Tailwind an, die CSS-Variable namens --primary zu verwenden, die in Ihrem globalen CSS definiert ist.

app/globals.css

Diese Datei ist nun das Herzstück des Themes Ihres Designsystems. Sie enthält die grundlegenden Tailwind-Direktiven und einen großen Block von CSS-Variablen. CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    /* ... viele weitere Variablen für das helle Theme */
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    /* ... viele weitere Variablen für das dunkle Theme */
  }
}

Hier sehen Sie die Stärke dieses Setups. Alle Ihre hellen Theme-Farben sind im :root-Scope definiert, und alle Ihre dunklen Theme-Farben sind innerhalb des .dark-Klassen-Scopes definiert. Wenn die Klasse .dark zum <html>-Element hinzugefügt wird, verwendet der Browser automatisch die Variablen des dunklen Themes.

Teil 3: Anpassung meistern – Theming, Layout und Dark Mode

Nachdem HeroUI initialisiert ist, beginnt der eigentliche Spaß: Machen Sie es zu Ihrem eigenen. Die Architektur ist explizit für eine tiefe und intuitive Anpassung konzipiert.

Die Kunst des Themings mit CSS-Variablen

Theming in HeroUI unterscheidet sich von den komplexen JavaScript-basierten Theme-Objekten, die Sie möglicherweise in anderen Bibliotheken finden. Es ist einfacher, leistungsfähiger und nutzt moderne CSS-Funktionen. Das gesamte Theme – Farben, Border-Radien, Schriftarten – wird durch CSS-Variablen gesteuert, die in Ihrer globals.css-Datei definiert sind.

Farben ändern

Angenommen, Sie möchten Ihre primäre Markenfarbe ändern. Sie müssen nicht in die Tailwind-Konfiguration gehen. Sie finden einfach die relevanten CSS-Variablen in globals.css und ändern deren Werte.

Die Farben werden mit HSL-Werten (Hue, Saturation, Lightness) definiert, jedoch ohne den hsl()-Wrapper. Zum Beispiel: CSS

:root {
  /* ... */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

.dark {
  /* ... */
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

Um Ihre Primärfarbe in ein lebendiges Grün zu ändern, könnten Sie einen Online-Farbpicker verwenden, um die HSL-Werte für Ihren gewählten Farbton zu finden und die Variablen zu aktualisieren: CSS

/* In globals.css */
:root {
  /* ... */
  --primary: 142.1 76.2% 36.3%; /* Neue grüne Primärfarbe */
  --primary-foreground: 355.7 100% 97.3%; /* Eine kontrastierende helle Farbe für Text auf der Primärfarbe */
  /* ... */
}

.dark {
  /* ... */
  --primary: 142.1 70.2% 46.3%; /* Ein etwas anderes Grün für den Dark Mode */
  --primary-foreground: 355.7 100% 97.3%;
  /* ... */
}

Sobald Sie diese Datei speichern, wird jede Komponente, die die Farbe "primary" verwendet (wie <Button>), sofort in Ihrer gesamten Anwendung aktualisiert, um diese neue grüne Farbe widerzuspiegeln. Das ist unglaublich leistungsfähig.

Border Radius ändern

Die Rundheit der Ecken von Komponenten wie Karten und Eingabefeldern wird durch eine einzige CSS-Variable gesteuert: --radius. CSS

/* In globals.css */
:root {
  /* ... */
  --radius: 0.5rem; /* Der Standardwert */
}

Wenn Sie ein schärferes, quadratischeres Aussehen bevorzugen, können Sie diesen Wert reduzieren: CSS

:root {
  --radius: 0.25rem; /* Weniger abgerundet */
}

Oder, für eine sehr weiche, abgerundete Ästhetik, können Sie ihn erhöhen: CSS

:root {
  --radius: 1.5rem; /* Sehr abgerundet */
}

Diese einzelne Zeilenänderung wird sich durch alle Ihre Komponenten ziehen und einen konsistenten Border Radius in Ihrer gesamten Benutzeroberfläche gewährleisten.

Neue Farben hinzufügen

Sie sind nicht auf die Farben beschränkt, die der init-Befehl bereitstellt. Sie können ganz einfach Ihre eigenen semantischen Farben hinzufügen. Fügen wir zum Beispiel eine "besondere" Markenfarbe hinzu.

Definieren Sie die CSS-Variablen in globals.css: CSS

/* In globals.css */
:root {
  /* ... */
  --special: 320 86% 59%;
  --special-foreground: 330 100% 98%;
}
.dark {
  /* ... */
  --special: 320 80% 69%;
  --special-foreground: 330 100% 98%;
}

Machen Sie sie Tailwind in tailwind.config.js zugänglich: JavaScript

// In tailwind.config.js
// ...
extend: {
  colors: {
    // ...
    special: {
      DEFAULT: "hsl(var(--special))",
      foreground: "hsl(var(--special-foreground))",
    },
  },
},
// ...

Jetzt können Sie diese Farben in Ihren Komponenten mit den Utility-Klassen von Tailwind verwenden, wie z. B. bg-special und text-special-foreground.

Responsive Layouts erstellen

HeroUI-Komponenten sind mit Tailwind CSS erstellt, was bedeutet, dass sie von Natur aus responsiv sind. Sie können Tailwinds responsive Präfixe (sm:, md:, lg:, xl:) auf jede Utility-Klasse anwenden, um den Stil einer Komponente bei unterschiedlichen Bildschirmgrößen zu ändern.

Stellen Sie sich vor, Sie erstellen ein einfaches Seitenlayout mit einer Seitenleiste, die auf dem Desktop sichtbar ist, aber auf Mobilgeräten zusammenklappt. Während HeroUI die Low-Level-Komponenten (Card, Button) bereitstellt, sind Sie dafür verantwortlich, diese zu einem größeren Layout zusammenzusetzen.

Hier ist ein Beispiel, wie Sie dies in einer Next.js-Seitenkomponente strukturieren könnten: TypeScript

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function DashboardPage() {
  return (
    <div className="flex min-h-screen flex-col md:flex-row">
      {/* Seitenleiste */}
      <aside className="w-full border-b bg-muted p-4 md:w-64 md:border-b-0 md:border-r">
        <h2 className="text-lg font-semibold">Navigation</h2>
        <nav className="mt-4 flex flex-row space-x-2 md:flex-col md:space-x-0 md:space-y-2">
          <Button variant="ghost" className="justify-start">Dashboard</Button>
          <Button variant="ghost" className="justify-start">Einstellungen</Button>
          <Button variant="ghost" className="justify-start">Profil</Button>
        </nav>
      </aside>

      {/* Hauptinhalt */}
      <main className="flex-1 p-8">
        <h1 className="text-4xl font-bold tracking-tight">Dashboard</h1>
        <p className="mt-2 text-muted-foreground">
          Willkommen zu Ihrem Dashboard.
        </p>
        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <Card>
            <CardHeader>
              <CardTitle>Umsatz</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">45.231,89 €</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Abonnements</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">+2350</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Aktive Benutzer</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">+573</p>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}

In diesem Beispiel:

Dies demonstriert das Kernprinzip: HeroUI liefert die gestylten Primitiven (Card, Button), und Sie nutzen die volle Kraft von Tailwind CSS, um sie zu responsiven, komplexen Layouts anzuordnen.

Makellosen Dark Mode implementieren

Eine der elegantesten Funktionen von HeroUI ist die integrierte Unterstützung für den Dark Mode. Da der init-Befehl bereits die Farbvariablen für helle (:root) und dunkle (.dark) Themes eingerichtet hat, ist die Implementierung überraschend einfach.

Der gebräuchlichste Ansatz ist die Verwendung des next-themes-Pakets, das das Umschalten des Themes und das Speichern der Benutzerauswahl im lokalen Speicher übernimmt.

Installieren Sie next-themes: Bash

npm install next-themes

Erstellen Sie einen Theme Provider:

Erstellen Sie eine neue Datei, zum Beispiel unter 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>;
}

Umschließen Sie Ihr Root Layout mit dem Provider:

Importieren und verwenden Sie in Ihrem Next.js Root Layout (app/layout.tsx) den ThemeProvider. TypeScript

import { ThemeProvider } from "@/components/theme-provider";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Die wichtigsten Props hier sind:

Erstellen Sie eine Theme-Umschalt-Schaltfläche:

Nun benötigen Sie lediglich ein UI-Element, mit dem der Benutzer das Theme wechseln kann. 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 { setTheme, theme } = useTheme();

  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  return (
    <Button variant="outline" size="icon" onClick={toggleTheme}>
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Theme umschalten</span>
    </Button>
  );
}

Diese1 Komponente verwendet den useTheme-Hook von next-themes, um das aktuelle Theme zu überprüfen und ein neues festzulegen. Die rotierenden Sonnen- und Mondsymbole sorgen für einen schönen visuellen Übergang. Platzieren Sie diese <ModeToggle /> Komponente einfach irgendwo in Ihrer Benutzeroberfläche (z. B. in einem Header), und Sie haben einen voll funktionsfähigen, persistenten Dark Mode-Umschalter.

Teil 4: Die HeroUI CLI und ihr komponentenzentrierter Workflow

Die heroui-cli ist mehr als nur ein Installer. Sie ist das primäre Werkzeug, das Sie zum Verwalten und Erweitern Ihrer Komponentenbibliothek verwenden werden. Ihr Hauptzweck nach der Initialisierung ist das Hinzufügen neuer Komponenten zu Ihrem Projekt.

Komponenten hinzufügen: Der Kern-Workflow

Nehmen wir an, Sie benötigen ein Dialogfenster für Ihre Anwendung. Anstatt eines von Grund auf neu zu schreiben, können Sie die CLI bitten, die vorgefertigte, zugängliche Dialog-Komponente von HeroUI hinzuzufügen.

Der Befehl ist einfach: Bash

npx heroui-cli@latest add dialog

Die CLI führt die folgenden Aktionen aus:

  1. Sie liest Ihre components.json-Datei, um die Struktur Ihres Projekts zu verstehen (Pfad-Aliase, TypeScript-Nutzung usw.).
  2. Sie ruft den neuesten Quellcode für die Dialog-Komponente und alle ihre Abhängigkeiten ab (z. B. könnte Dialog von Button abhängen).
  3. Sie platziert die Komponentendateien direkt in Ihrem Komponentenverzeichnis, zum Beispiel: components/ui/dialog.tsx.
  4. Sie informiert Sie über alle weiteren Abhängigkeiten, die Sie möglicherweise installieren müssen.

Jetzt haben Sie eine dialog.tsx-Datei in Ihrem Projekt. Sie können ihren Code überprüfen, daraus lernen und ihn sogar ändern. Wenn der Standard-Dialog eine Transition hat, die Ihnen nicht gefällt, können Sie einfach die Datei öffnen und die Tailwind-Klassen ändern, die die Animation steuern. Dieses Maß an Kontrolle ist der Eckpfeiler der HeroUI-Erfahrung.

Sie können mehrere Komponenten gleichzeitig hinzufügen: Bash

npx heroui-cli@latest add card button input label

Dieser Befehl fügt alle vier Komponenten und ihre Abhängigkeiten in einem Durchgang zu Ihrem Projekt hinzu.

Die CLI API verstehen: components.json

Die components.json-Datei ist der Vertrag zwischen Ihrem Projekt und der HeroUI CLI. Lassen Sie uns ihre Eigenschaften erneut betrachten, um zu verstehen, wie sie das Verhalten der CLI beeinflussen.

Durch das Verständnis dieser Konfiguration können Sie das Verhalten der CLI sogar manuell anpassen, wenn Sie sich entscheiden, die Struktur Ihres Projekts zu refaktorieren, z. B. indem Sie Ihr Komponentenverzeichnis von @/components nach @/ui verschieben.

Fazit: Bauen Sie auf Ihre Weise mit HeroUI

HeroUI stellt eine bedeutende Verschiebung in der Art und Weise dar, wie Entwickler über UI-Bibliotheken denken und sie verwenden können. Es bewegt sich weg vom Einheitsmodell der Black Box hin zu einer transparenten, befähigenden und tiefgreifend anpassbaren Entwicklererfahrung. Durch die Bereitstellung ungestylter, zugänglicher Komponenten direkt als Quellcode schafft es die perfekte Balance zwischen schneller Entwicklung und maßgeschneidertem Design.

Die Kernstärken von HeroUI sind klar:

HeroUI ist für die Bauherren, die Handwerker und die Teams, die glauben, dass ihre Benutzeroberfläche ein Kernbestandteil der Identität ihres Produkts ist. Es gibt Ihnen kein fertiges Haus; es gibt Ihnen die hochwertigsten Materialien und eine perfekt organisierte Werkstatt, um das Haus Ihrer Träume zu bauen. Für Ihr nächstes Projekt, das eine einzigartige, ausgefeilte und wartbare Frontend erfordert, suchen Sie nicht weiter als HeroUI. Es könnte genau das Werkzeug sein, das Sie befähigt, Ihre bisher heldenhafteste Benutzeroberfläche zu bauen.

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

Möchten Sie eine integrierte All-in-One-Plattform, damit Ihr Entwicklerteam mit maximaler Produktivität zusammenarbeiten kann?

Apidog erfüllt all Ihre Anforderungen und ersetzt Postman zu einem viel günstigeren Preis!
Schaltfläche

Praktizieren Sie API Design-First in Apidog

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

Kostenlos registrierenDownload