Liftkit: UI framework based on the golden ratio

LiftKit is a UI framework based on the golden ratio. At its core, it's a set of formulas and variables that unlock advanced visual design features like optical spacing corrections and dynamic color, powered by Material 3.

• The following instructions are easier to read on our website: See Documentation

This documentation assumes the following:

• You already have Node.js, npm, and Git installed on your local machine
• You’re familiar with basic terminal commands like cd

1. Paste the following command into your terminal to clone the template:

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

2. cd into the newly-created project.

   • If you get an error that says direnv: error, just ignore it. It's a bug we'll fix soon.

3. Run:

4. Install the components you need (see section 2 below).

5. Import LiftKit’s CSS into your app’s globals.css:

   @import url('@/lib/css/index.css');

A blank Next.js project with LiftKit Core’s config files pre-installed—fastest way to get up and running.

1. cd into your project’s root directory.

2. Install LiftKit CLI as a dev dependency:

   npm install @chainlift/liftkit --save-dev

3. Initialize LiftKit:

   • If prompted to add an add script to package.json, say yes.
   • If prompted to install shadcn as a devDependency, say yes.

4. Install the components you need (see section 2 below).

5. Import LiftKit’s CSS into your app’s globals.css:

   @import url('@/lib/css/index.css');

It adds two files to your project root:

• components.json
• tailwind.config.ts

You do not need Tailwind itself to use LiftKit—just the config file for now.

LiftKit Core is just the base config. LiftKit Components are the actual UI components (with their CSS). At build time, unused CSS is tree-shaken away.

If warned about React 19 compatibility, add --force and proceed.

• I only installed one component, but it installed multiple. Why? Some components import others. E.g., installing Badge also brings in Icon.
• Why did it install CSS for components I’m not using? By design—to let you play freely. Unused styles are removed at build time.
• How can I get rid of unused CSS? It’s automatically removed at build time.
• Does LiftKit require Tailwind? No—only a tailwind.config.ts file is needed (a requirement of the current registry). Tailwind itself is not a dependency.

Warning: It’s currently a dumpster fire. We’re working on improvements—contributors welcome!

• View File on Figma (opens in new tab)

• We know. We’ll fix it soon.

  • Buttons adjust padding based on icon presence, and padding values aren’t controllable via props.
  • Our only option was to list everything explicitly—clearly a bad idea in hindsight.

• Figma doesn’t support margins or em units, so we converted everything to pixels (assuming 1rem = 16px).

• Variables are organized into collections:

  • Global collection = base LkSizeUnit variables
  • Text Spacing Vals = subsets per LkFontClass, simulating spacing props like .m-bottom-xs

• View on Made in Webflow (opens in new tab)