kilah ui

Kilahui | Source gratuite et open | Créez votre site Web plus rapidement avec une adaptabilité transparente

Kilahui est inspiré par Hyperui.dev . Depuis qu'il l'a découvert, j'ai été frappé par la brillance de l'idée et j'ai lancé dans la création de ma propre version.

Ce projet est open source , alors n'hésitez pas à contribuer vos composants! Vous pouvez lire le guide sur CONTRIBUTING.md ou visiter la section Contribue sur le site officiel de kilahui.vercel.app/contribute.

Commencer

Kilahui utilise PNPM pour la gestion des dépendances. Pour commencer, courez:

pnpm install
pnpm run dev

Le projet fonctionne sur next.js v15 , et la structure du répertoire est la suivante:

 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

Couleurs personnalisées

L'une des premières choses que j'ai décidées de faire différemment a été d'utiliser des couleurs personnalisées . Pourquoi? Je me suis souvent retrouvé à modifier les couleurs des bibliothèques de composants TailwindCSS pour s'adapter à mon thème. J'ai donc décidé que Kilahui offrirait des couleurs personnalisables pour améliorer l'expérience.

Inspiré par Shadcn et son approche de la déclaration des couleurs, Kilahui comprend également un support facile en mode sombre. Vous trouverez ci-dessous la palette par défaut utilisée:

 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" ,
} ,

Chaque composant propose diverses palettes pour démontrer la polyvalence.

Aire de jeux

Voici un aperçu du terrain de jeu Kilahui :

À gauche, vous pouvez définir des points d'arrêt, et à droite, vous pouvez basculer entre la démo et le code. De plus, vous pouvez basculer entre HTML / JSX et afficher le composant ou la configuration du vent arrière utilisé par ce composant.

Il y a une barre de recherche pour trouver des composants par des mots clés - bien que j'admets de nommer les composants n'était pas mon point le plus fort ?.

Fonctionnalités à venir

• Prise en charge du mode noir / léger : pas seulement pour le site Web, mais pour chaque composant individuellement.
• Fonctionnalité de demande de demande : les utilisateurs peuvent demander des composants en fonction des idées de conception.
• Analytique : planifier d'intégrer des outils tels que Posthog for Analytics.

---

Merci d'avoir lu! Si vous aimez le projet, envisagez de laisser une star pour soutenir son développement continu.

Paix!

---