Repolode
Submit
Chainlift

Chainlift/liftkit

A CSS-first UI component framework built on design formulas for scaling, spacing and color, currently for Next.js and not yet production-ready.

View on GitHubWebsite
Stars
3,270
Forks
63
Open issues
13
Last commit
12 days ago

What is it?

LiftKit is a UI framework built around a platform-agnostic set of formulas for scaling, spacing and color. The aim is to produce visually balanced interfaces by applying rules such as optical symmetry, proportional spacing and smooth color ramps, so developers who lack design training can still get consistent results.

The project ships a CLI (npx liftkit init) that adds configuration files to a Next.js project, and an install command that lets you add all components, a single component, or just the base CSS and types. Unused CSS is removed at build time. The current release supports Next.js without Tailwind, and a Figma template and Webflow template are also provided.

The maintainers state that the current version is not recommended for production use and that a rewrite is underway, with new components planned to wrap Base UI primitives.

Key features

  • 01Scaling, spacing and color formulas that enforce layout and color best practices.
  • 02CLI command to initialize LiftKit config files in a Next.js project.
  • 03Install all components, a single component, or base CSS and types only.
  • 04Unused component CSS is removed at build time.
  • 05Figma and Webflow templates are included.

Use cases

  • Prototyping a Next.js interface with consistent spacing and color scales.
  • Exploring a design-system approach in a project that does not use Tailwind.
  • Starting from a Figma file that mirrors the component variables.

Quick start

  1. 1

    Clone the LiftKit template project

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

    Install dependencies in the project folder

    npm install
  3. 3

    Install all LiftKit components and styles

    npm run add all

Things to know

  • The README says it is not recommended for production use and is being rewritten.
  • It currently supports only Next.js, without Tailwind.
  • Setup requires Node.js, npm, and Git, and the README notes a rewrite about 50% complete as of March 2026.

Topics

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

FAQ

What is liftkit?
A CSS-first UI component framework built on design formulas for scaling, spacing and color, currently for Next.js and not yet production-ready. LiftKit is a UI framework built around a platform-agnostic set of formulas for scaling, spacing and color. The aim is to produce visually balanced interfaces by applying rules such as optical symmetry, proportional spacing and smooth color ramps, so developers who lack design training can still get consistent results.
Is liftkit free to use? What license does it have?
liftkit is open source under the Apache-2.0 license. Check the license terms before using it in commercial products.
Is liftkit still maintained?
Actively maintained. The last commit to liftkit was on Oct 26, 2026.
What can I use liftkit for?
Prototyping a Next.js interface with consistent spacing and color scales. Exploring a design-system approach in a project that does not use Tailwind. Starting from a Figma file that mirrors the component variables.
How do I install liftkit?
Clone the LiftKit template project: git clone https://github.com/Chainlift/liftkit-template.git Install dependencies in the project folder: npm install Install all LiftKit components and styles: npm run add all
Where can I get liftkit?
The source code and installation instructions are on GitHub: https://github.com/Chainlift/liftkit

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects