kilah ui

Kilahui | Livre e código aberto | Construa seu site mais rápido com adaptabilidade perfeita

Kilahui é inspirado em Hyperui.dev . Desde que o descobri, fiquei impressionado com o quão brilhante foi a idéia e embarcou em criar minha própria versão.

Este projeto é de código aberto , então fique à vontade para contribuir com seus componentes! Você pode ler o guia em CONTRIBUTING.md ou visitar a seção de contribuir no site oficial em kilahui.vercel.app/contribute.

Começando

Kilahui usa o PNPM para gerenciamento de dependência. Para começar, corra:

pnpm install
pnpm run dev

O projeto é executado no próximo.js v15 , e a estrutura do diretório é a seguinte:

 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

Cores personalizadas

Uma das primeiras coisas que me propus a fazer de maneira diferente foi usar cores personalizadas . Por que? Muitas vezes me vi modificando as cores das bibliotecas de componentes TailWindcss para se encaixar no meu tema. Então, decidi que o Kilahui ofereceria cores personalizáveis ​​para aprimorar a experiência.

Inspirado no Shadcn e sua abordagem para a declaração de cores, o Kilahui também inclui o suporte fácil do modo escuro. Abaixo está a paleta padrão usada:

 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 oferece várias paletas para demonstrar versatilidade.

Playground

Aqui está uma prévia do playground Kilahui :

À esquerda, você pode definir pontos de interrupção e, à direita, você pode alternar entre a demonstração e o código. Além disso, você pode alternar entre HTML/JSX e visualizar o componente ou a configuração do vento de cauda usado por esse componente.

Há uma barra de busca para encontrar componentes por palavras -chave - embora eu admito que os componentes de nomeação não fossem o meu ponto mais forte?

Próximos recursos

• Suporte ao modo escuro/claro : não apenas para o site, mas para cada componente individualmente.
• Recurso do componente de solicitação : os usuários podem solicitar componentes com base em idéias de design.
• Analytics : planejando integrar ferramentas como Posthog for Analytics.

---

Obrigado pela leitura! Se você gosta do projeto, considere deixar uma estrela para apoiar seu desenvolvimento contínuo.

Paz fora!

---