The UI Framework for Perfectionists

arrow_forward
Read the Docs

What is LiftKit?

An open-source UI framework that solves symmetry problems.

It does other things too, but that's the gist of it.

example components

Material

LiftKit

Buttons with corrected icon spacing

Button icons can make it look like there’s too much padding on the sides where they appear (even when it’s equal on both sides). LiftKit solves this problem by dynamically reducing padding based on font size.

SHADCN

LiftKit

Cards without the extra top padding

LiftKit’s cards offer an opticalCorrection prop, so you can offset the added whitespace due to line-height of its contents and ensure padding feels equal on all sides.

MACOS SEQUOIA

LiftKit

Inputs with room to breathe

In LiftKit, everything derives from the golden ratio, from margins to font size to border radius and beyond. Everything renders in perfect proportion to everything else, creating a unique sense of harmony you can’t get anywhere else.

The secret formula for "oddly-satisfying."

LiftKit produces golden-ratio proportions with subpixel accuracy using familiar utility classes that make components feel satisfying.

Heading

Dynamic color that's actually easy to use.

This ain't your grandma's theme builder, folks. LiftKit offers a modular control panel for global color you can just add to any file while you're working to preview changes in real time. From subtle tints to color flooding, the possibilites are limitless.

And color's just the beginning. You can easily adjust the following behaviors in the CSS while we continue working on adding them to the control panel.

Typography

Granular controls for global typography that go far beyond font family.

Custom Materials

Create your own "-morphism." Start with presets like glass, flat, and rubber, or something completely new.

Scaling

Like those sliders you see for text scaling, except your spacing and everything else scales with it.

Component-specific configs

Tweak component appearance independently by detaching and hooking them back up to different LK variables.

An almost concerning level of detail.

Make MVP's that don't look like MVP's. LiftKit gives your work a level of visual polish that puts you ahead right from the start. It bakes in those tiny little details that make people say "I can't explain it. It just feels better."

Unlock the power of the golden ratio.

Get ready to fall in love with front-end aaaall over again.

arrow_forward
Start Building