Repolode
提交项目
Chainlift

Chainlift/liftkit

基于缩放、间距与配色公式的 CSS 优先 UI 组件框架，目前面向 Next.js，尚不建议用于生产环境。

在 GitHub 查看官网
Star
3,269
Fork
63
未关闭 Issue
13
最近提交
12天前

这是什么？

LiftKit 是一套 UI 框架，核心是一组与平台无关的缩放、间距和配色公式。它通过对光学对称、比例间距和平滑色阶等设计原则进行自动约束，帮助缺乏设计训练的开发者也能做出视觉协调的界面。

项目提供 CLI，执行 npx liftkit init 即可为 Next.js 项目添加配置文件。安装时可以选择全部组件、单个组件或仅安装基础 CSS 与类型定义，构建时会自动移除未使用的样式。当前版本支持不带 Tailwind 的 Next.js 项目，并配有 Figma 和 Webflow 模板。

项目维护者明确表示当前版本不建议用于生产环境，团队正在重写，新组件计划基于 Base UI 原语构建。

核心功能

  • 01基于缩放、间距与配色公式，自动约束布局和色彩规范。
  • 02提供 CLI 命令，在 Next.js 项目中初始化配置文件。
  • 03可按需安装全部组件、单个组件或仅基础 CSS 与类型。
  • 04构建时自动移除未使用的组件样式。
  • 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 明确表示不建议用于生产环境，项目目前正在重写。
  • 目前仅支持 Next.js，且不使用 Tailwind。
  • 使用前需安装 Node.js、npm 和 Git；README 称截至 2026 年 3 月重写工作约完成 50%。

标签

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

常见问题

liftkit 是什么？
基于缩放、间距与配色公式的 CSS 优先 UI 组件框架，目前面向 Next.js，尚不建议用于生产环境。 LiftKit 是一套 UI 框架，核心是一组与平台无关的缩放、间距和配色公式。它通过对光学对称、比例间距和平滑色阶等设计原则进行自动约束，帮助缺乏设计训练的开发者也能做出视觉协调的界面。
liftkit 可以免费使用吗？用的什么许可证？
liftkit 以 Apache-2.0 许可证开源。用于商业产品前，请先确认许可证条款。
liftkit 还在维护吗？
活跃维护中。liftkit 最近一次提交是在 2026年10月26日。
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

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目