kilah ui

Kilahui | Free & Open Source | Construya su sitio web más rápido con una adaptabilidad perfecta

Kilahui está inspirado en Hyperui.dev . Desde que lo descubrí, me sorprendió lo brillante que era la idea y me embarcó en crear mi propia versión.

Este proyecto es de código abierto , ¡así que no dude en contribuir con sus componentes! Puede leer la Guía en CONTRIBUTING.md o visitar la sección Contribuir en el sitio web oficial en kilahui.vercel.app/contribute.

Empezando

Kilahui usa PNPM para la gestión de dependencias. Para comenzar, ejecute:

pnpm install
pnpm run dev

El proyecto se ejecuta en Next.js V15 , y la estructura del directorio es la siguiente:

 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

Colores personalizados

Una de las primeras cosas que me propuse hacer de manera diferente fue usar colores personalizados . ¿Por qué? A menudo me encontraba modificando los colores de las bibliotecas de componentes de las ondas de cola para que se ajusten a mi tema. Entonces, decidí que Kilahui ofrecería colores personalizables para mejorar la experiencia.

Inspirado en Shadcn y su enfoque para la declaración de color, Kilahui también incluye soporte de modo oscuro fácil. A continuación se muestra la paleta predeterminada utilizada:

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

Cada componente ofrece varias paletas para demostrar versatilidad.

Patio de juegos

Aquí hay un adelanto del patio de juegos Kilahui :

A la izquierda, puede definir puntos de interrupción, y a la derecha, puede alternar entre la demostración y el código. Además, puede cambiar entre HTML/JSX y ver el componente o la configuración de viento de cola utilizada por ese componente.

Hay una barra de búsqueda para encontrar componentes mediante palabras clave, aunque admito que nombrar componentes no fue mi punto más fuerte.

Próximas características

• Soporte de modo oscuro/ligero : no solo para el sitio web, sino para cada componente individualmente.
• Función de componente de solicitud : los usuarios pueden solicitar componentes basados ​​en ideas de diseño.
• Análisis : planificación para integrar herramientas como Posthog for Analytics.

---

¡Gracias por leer! Si disfruta del proyecto, considere dejar una estrella para apoyar su desarrollo continuo.

¡Paz!

---