kilah ui

Килахуи | Бесплатный и открытый исходный код | Создайте свой сайт быстрее с бесшовной адаптивностью

Килахуи вдохновлен Hyperui.dev . С тех пор, как я обнаружил это, меня поразило, насколько блестящей была идея, и начал создавать мою собственную версию.

Этот проект является открытым исходным кодом , поэтому не стесняйтесь вносить свои компоненты! Вы можете прочитать руководство в CONTRIBUTING.md или посетить раздел «Соответствие» на официальном веб -сайте на kilahui.vercel.app/contribute.

Начиная

Kilahui использует PNPM для управления зависимостями. Чтобы начать, беги:

pnpm install
pnpm run dev

Проект работает на letle.js v15 , а структура каталогов выглядит следующим образом:

 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

Пользовательские цвета

Одним из первых вещей, которые я намеревался сделать по -другому, было использовать пользовательские цвета . Почему? Я часто обнаруживал, что изменяю цвета из библиотек компонентов Tailwindcss, чтобы соответствовать моей теме. Итак, я решил, что Kilahui предложит настраиваемые цвета для улучшения опыта.

Вдохновленный Shadcn и его подход к цветовой объявлении, Kilahui также включает в себя легкую поддержку Dark Mode. Ниже используется палитра по умолчанию:

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

Каждый компонент предлагает различные палитры для демонстрации универсальности.

Детская площадка

Вот краткий обзор детской площадки Килахуи :

Слева вы можете определить точки останова, а справа вы можете переключаться между демонстрацией и кодом. Кроме того, вы можете переключаться между HTML/JSX и просмотреть либо компонент, либо конфигурацию Tailwind, используемая этим компонентом.

Есть строка поиска, чтобы найти компоненты по ключевым словам - хотя я признаю, что компоненты именования не были моей самой сильной точкой?

Предстоящие функции

• Поддержка Dark/Light Mode : не только для веб -сайта, но и для каждого компонента индивидуально.
• Функция-запрос-компонент : пользователи могут запросить компоненты на основе дизайнерских идей.
• Аналитика : планирование интеграции таких инструментов, как Posthog для аналитики.

---

Спасибо за чтение! Если вам нравится проект, пожалуйста, подумайте о том, чтобы оставить звезду, чтобы поддержать его дальнейшее развитие.

Мири!

---