kilah ui

Kilahui | Kostenlos & Open Source | Erstellen Sie Ihre Website schneller mit nahtloser Anpassungsfähigkeit

Kilahui ist von Hyperui.dev inspiriert. Seit ich es entdeckte, war ich beeindruckt, wie brillant die Idee war und habe meine eigene Version erstellt.

Dieses Projekt ist Open Source . Sie können also gerne Ihre Komponenten beibehalten! Sie können den Leitfaden für CONTRIBUTING.md lesen oder den Beitrag zur offiziellen Website in Kilahui.vercel.app/Contribute besuchen.

Erste Schritte

Kilahui verwendet PNPM für das Abhängigkeitsmanagement. Um loszulegen, rennen Sie:

pnpm install
pnpm run dev

Das Projekt läuft auf Next.js v15 , und die Verzeichnisstruktur lautet wie folgt:

 public/
    components/       # Codebase for each component
src/
    app/
        (markdown-pages)/  # Pages that use MDX
        [category]/        # Route for each component
        api/               # Route handler for search
        components/        # Components used by the website
        constants/         # Constants
        context/           # Contexts
        hooks/             # Custom hooks
        lib/               # Modules

Benutzerdefinierte Farben

Eines der ersten Dinge, die ich anders wollte, war die Verwendung benutzerdefinierter Farben . Warum? Ich modifizierte oft Farben aus den Sprengwindcss -Komponentenbibliotheken, um mein Thema anzupassen. Also entschied ich, dass Kilahui anpassbare Farben anbieten würde, um die Erfahrung zu verbessern.

Inspiriert von Shadcn und seinem Ansatz zur Farberklärung enthält Kilahui auch die Unterstützung für den einfachen Dark -Modus. Unten finden Sie die verwendete Standardpalette:

 colors : {
  background : "#ffffff" ,
  foreground : "#d82116" ,
  card : "#ffffff" ,
  "card-foreground" : "#d82116" ,
  primary : "#846bce" ,
  "primary-foreground" : "#e9f1f9" ,
  secondary : "#e0e9f5" ,
  "secondary-foreground" : "#2d3446" ,
  accent : "#e0e9f5" ,
  "accent-foreground" : "#2d3446" ,
  danger : "#e5193e" ,
  "danger-foreground" : "#e9f1f9" ,
  border : "#d1dce8" ,
  input : "#d1dce8" ,
} ,

Jede Komponente bietet verschiedene Paletten, um die Vielseitigkeit zu demonstrieren.

Spielplatz

Hier ist ein kleiner Blick auf den Kilahui -Spielplatz :

Links können Sie Haltepunkte definieren und auf der rechten Seite können Sie zwischen der Demo und dem Code wechseln. Darüber hinaus können Sie zwischen HTML/JSX wechseln und entweder die von dieser Komponente verwendete Konfiguration der Komponente oder der Rückenwindkonfiguration anzeigen.

Es gibt eine Suchleiste, um Komponenten nach Schlüsselwörtern zu finden - obwohl ich zu gebe, dass Namenskomponenten nicht mein stärkster Punkt?

Bevorstehende Funktionen

• Dunkel-/Lichtmodus -Unterstützung : Nicht nur für die Website, sondern für jede Komponente einzeln.
• Request-Component-Funktion : Benutzer können Komponenten basierend auf Designideen anfordern.
• Analytik : Planung zur Integration von Tools wie Posthog für Analytics.

---

Danke fürs Lesen! Wenn Sie das Projekt genießen, sollten Sie einen Stern verlassen, um seine fortgesetzte Entwicklung zu unterstützen.

Frieden aus!

---