Repolode
Предложить
Chainlift

Chainlift/liftkit

CSS-first UI-фреймворк на основе формул для масштабирования, отступов и цвета; пока поддерживает Next.js и не готов к использованию в production.

Открыть на GitHubСайт
Звёзды
3,269
Форки
63
Открытые issues
13
Последний коммит
12 дней назад

Что это?

LiftKit — UI-фреймворк, построенный на независимом от платформы наборе формул для масштабирования, отступов и цвета. Он помогает создавать визуально сбалансированные интерфейсы за счёт таких правил, как оптическая симметрия, пропорциональные отступы и плавные цветовые шкалы, чтобы разработчики без дизайнерской подготовки тоже могли добиваться согласованных результатов.

В проект входит CLI-команда (npx liftkit init), которая добавляет файлы конфигурации в проект Next.js, а также команда установки, позволяющая добавить все компоненты, один компонент или только базовые CSS и типы. Неиспользуемый CSS удаляется на этапе сборки. Текущий релиз поддерживает Next.js без Tailwind; также доступны шаблоны для Figma и Webflow.

Авторы проекта предупреждают, что текущую версию не рекомендуют использовать в production. Сейчас идёт переработка проекта, а новые компоненты планируется построить на основе примитивов Base UI.

Ключевые возможности

  • 01Формулы масштабирования, отступов и цвета, помогающие соблюдать лучшие практики вёрстки и работы с цветом.
  • 02CLI-команда для инициализации файлов конфигурации LiftKit в проекте Next.js.
  • 03Установка всех компонентов, одного компонента или только базовых CSS и типов.
  • 04Неиспользуемый CSS компонентов удаляется на этапе сборки.
  • 05В комплект входят шаблоны для Figma и Webflow.

Сценарии использования

  • Создание прототипа интерфейса Next.js с согласованными шкалами отступов и цвета.
  • Изучение подхода на основе дизайн-системы в проекте без Tailwind.
  • Начало работы с файлом Figma, повторяющим переменные компонентов.

Быстрый старт

  1. 1

    Клонируйте шаблонный проект LiftKit

    git clone https://github.com/Chainlift/liftkit-template.git
  2. 2

    Установите зависимости в папке проекта

    npm install
  3. 3

    Установите все компоненты и стили LiftKit

    npm run add all

Что важно знать

  • В README указано, что проект не рекомендуется использовать в production и что он переписывается.
  • Сейчас поддерживается только Next.js, без Tailwind.
  • Для настройки требуются Node.js, npm и Git. Согласно README, по состоянию на март 2026 года переписывание было завершено примерно на 50%.

Темы

#component-library#css#nextjs#design-system#ui-framework#shadcn#web

Частые вопросы

Что такое liftkit?
CSS-first UI-фреймворк на основе формул для масштабирования, отступов и цвета; пока поддерживает Next.js и не готов к использованию в production. LiftKit — UI-фреймворк, построенный на независимом от платформы наборе формул для масштабирования, отступов и цвета. Он помогает создавать визуально сбалансированные интерфейсы за счёт таких правил, как оптическая симметрия, пропорциональные отступы и плавные цветовые шкалы, чтобы разработчики без дизайнерской подготовки тоже могли добиваться согласованных результатов.
liftkit можно использовать бесплатно? Какая у него лицензия?
liftkit распространяется с открытым исходным кодом под лицензией Apache-2.0. Перед использованием в коммерческих продуктах проверьте условия лицензии.
liftkit всё ещё поддерживается?
Активно поддерживается. Последний коммит в liftkit — 26 окт. 2026 г..
Для чего можно использовать liftkit?
Создание прототипа интерфейса Next.js с согласованными шкалами отступов и цвета. Изучение подхода на основе дизайн-системы в проекте без Tailwind. Начало работы с файлом Figma, повторяющим переменные компонентов.
Как установить liftkit?
Клонируйте шаблонный проект LiftKit: git clone https://github.com/Chainlift/liftkit-template.git Установите зависимости в папке проекта: npm install Установите все компоненты и стили LiftKit: npm run add all
Где скачать liftkit?
Исходный код и инструкции по установке — на GitHub: https://github.com/Chainlift/liftkit

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты