LiftKit lays the groundwork for a strong design foundation. You won't find hundreds of random components here. Instead, LiftKit merely lets you skip the boring stuff, empowering you to build your way.
-Chainlift's utility classes guarantee everything—every width, every font size, and every border radius—is scaled in perfect proportion to everything else. You'll have to really go out of your way to make it look bad.
-Utility classes have never been this easy. And with Chainlift Color, you can easily swap your entire color scheme in a matter of seconds, making it the perfect solution for agencies or high-volume freelancers
-Best for marketers
-bg-light__primary
-bg-light__primaryContainer
-bg-light__secondary
-bg-light__secondaryContainer
-bg-light__tertiary
-bg-light__tertiaryContainer
-bg-light__error
-bg-light__errorContainer
-bg-light__warning
-bg-light__warningContainer
-bg-light__success
-bg-light__successContainer
-bg-light__info
-bg-light__infoContainer
-bg-light__background
-bg-light__onBackground
-bg-light__surface
-bg-light__onSurface
-bg-light__surfaceContainer
-bg-light__onSurface
-bg-light__surfaceVariant
-bg-light__onSurfaceVariant
-bg-light__outline
-bg-light__outlineVariant
-Best for product designers (and masochists)
-bg-light__primary
-bg-light__onPrimary
-bg-light__primaryContainer
-bg-light__onPrimaryContainer
-bg-light__primaryFixed
-bg-light__primaryFixedDim
-bg-light__onPrimaryFixed
-bg-light__onPrimaryFixedVariant
-bg-light__secondary
-bg-light__onSecondary
-bg-light__secondaryContainer
-bg-light__onSecondaryContainer
-bg-light__secondaryFixed
-bg-light__secondaryFixedDim
-bg-light__onSecondaryFixed
-bg-light__onSecondaryFixedVariant
-bg-light__tertiary
-bg-light__onTertiary
-bg-light__tertiaryContainer
-bg-light__onTertiaryContainer
-bg-light__tertiaryFixed
-bg-light__tertiaryFixedDim
-bg-light__onTertiaryFixed
-bg-light__onTertiaryFixedVariant
-bg-light__error
-bg-light__onError
-bg-light__errorContainer
-bg-light__onErrorContainer
-bg-light__warning
-bg-light__onWarning
-bg-light__warningContainer
-bg-light__onWarningContainer
-bg-light__success
-bg-light__onSuccess
-bg-light__successContainer
-bg-light__onSuccessContainer
-bg-light__info
-bg-light__onInfo
-bg-light__infoContainer
-bg-light__onInfoContainer
-bg-light__background
-bg-light__onBackground
-bg-light__surface
-bg-light__onSurface
-bg-light__surfaceVariant
-bg-light__onSurfaceVariant
-bg-light__surfaceDim
-bg-light__surfaceBright
-bg-light__surfaceContainerLowest
-bg-light__surfaceContainerLow
-bg-light__surfaceContainer
-bg-light__surfaceContainerHigh
-bg-light__surfaceContainerHighest
-bg-light__inverseSurface
-bg-light__inverseOnSurface
-bg-light__inversePrimary
-bg-light__outline
-bg-light__outlineVariant
-bg-light__shadow
-bg-light__scrim
-bg-dark__primary
-bg-dark__onPrimary
-bg-dark__primaryContainer
-bg-dark__onPrimaryContainer
-bg-dark__primaryFixed
-bg-dark__primaryFixedDim
-bg-dark__onPrimaryFixed
-bg-dark__onPrimaryFixedVariant
-bg-dark__secondary
-bg-dark__onSecondary
-bg-dark__secondaryContainer
-bg-dark__onSecondaryContainer
-bg-dark__secondaryFixed
-bg-dark__secondaryFixedDim
-bg-dark__onSecondaryFixed
-bg-dark__onSecondaryFixedVariant
-bg-dark__tertiary
-bg-dark__onTertiary
-bg-dark__tertiaryContainer
-bg-dark__onTertiaryContainer
-bg-dark__tertiaryFixed
-bg-dark__tertiaryFixedDim
-bg-dark__onTertiaryFixed
-bg-dark__onTertiaryFixedVariant
-bg-dark__error
-bg-dark__onError
-bg-dark__errorContainer
-bg-dark__onErrorContainer
-bg-dark__warning
-bg-dark__onWarning
-bg-dark__warningContainer
-bg-dark__onWarningContainer
-bg-dark__success
-bg-dark__successContainer
-bg-dark__onSuccess
-bg-dark__onSuccessContainer
-bg-dark__info
-bg-dark__onInfo
-bg-dark__infoContainer
-bg-dark__onInfoContainer
-bg-dark__background
-bg-dark__onBackground
-bg-dark__surface
-bg-dark__onSurface
-bg-dark__surfaceVariant
-bg-dark__onSurfaceVariant
-bg-dark__surfaceDim
-bg-dark__surfaceBright
-bg-dark__surfaceContainerLowest
-bg-dark__surfaceContainerLow
-bg-dark__surfaceContainer
-bg-dark__surfaceContainerHigh
-bg-dark__surfaceContainerHighest
-bg-dark__inverseSurface
-bg-dark__inverseOnSurface
-bg-dark__inversePrimary
-bg-dark__outline
-bg-dark__outlineVariant
-bg-dark__shadow
-bg-dark__scrim
-Text color requires less variation for most use cases, so the only ones pre-bundled with LiftKit are the following. Feel free to use the provided class naming template to create your own.
-The standard styles use light-to-medium weights (except for Heading) and give interfaces a light, airy feel.
-Style | -Weight | -Size (em) | -Line Height | -Letter Spacing (em) | -
---|---|---|---|---|
Display 1 | -400 | -4.235 | -1.129 | --0.022 | -
Display 2 | -400 | -2.618 | -1.272 | --0.022 | -
Title A | -400 | -2.058 | -1.272 | --0.022 | -
Title B | -400 | -1.618 | -1.272 | --0.02 | -
Title C | -400 | -1.272 | -1.272 | --0.017 | -
Heading | -600 | -1.129 | -1.272 | --0.014 | -
Subheading | -400 | -0.885 | -1.272 | --0.007 | -
Body | -400 | -1 | -1.618 | --0.011 | -
Callout | -400 | -0.943 | -1.272 | --0.009 | -
Label | -500 | -0.835 | -1.272 | --0.004 | -
Caption | -400 | -0.786 | -1.272 | --0.007 | -
Overline | -400 | -0.786 | -1.272 | -0.0618 | -
Style | -Weight | -Size (em) | -Line Height (unitless) | -Letter Spacing (em) | -
---|---|---|---|---|
Display 1 | -700 | -4.235 | -1.129 | --0.022 | -
Display 2 | -700 | -2.618 | -1.272 | --0.022 | -
Title A | -700 | -2.058 | -1.272 | --0.022 | -
Title B | -600 | -1.618 | -1.272 | --0.02 | -
Title C | -600 | -1.272 | -1.272 | --0.017 | -
Heading | -700 | -1.129 | -1.272 | --0.014 | -
Subheading | -600 | -0.885 | -1.272 | --0.007 | -
Body | -600 | -1 | -1.618 | --0.011 | -
Callout | -600 | -0.943 | -1.272 | --0.009 | -
Label | -700 | -0.835 | -1.272 | --0.004 | -
Caption | -600 | -0.786 | -1.272 | --0.007 | -
Overline | -600 | -0.786 | -1.272 | -0.0618 | -
Rich text applies the styles above to the corresponding HTML tags for each.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
-Block quote-
Ordered list
-Unordered list
-- Text link -
-Bold text
-Emphasis
-Superscript
-Subscript
- -These utility classes control the padding for when there's a start or end icon, or both.
-In LiftKit, spacing uses utility classes to give designers the flexibility to assign spacing based on each use case. By leveraging balanced scaling derived from golden ratio coefficients, the spacing system guarantees that every element, gap, margin, or padding on a page is truly proportional to every other.
-Margins are by far the most heavily-used spacing class in LiftKit. They range from __xs to__xxl. There is no xxs because, at that scale, the difference is visually indistinguishable.
- -Gaps can be applied as combo classes to elements with display set to either flex or grid.
-Every grid has class "grid." Combo classes indicate column count. Rows generate automatically.
-Every grid has class "grid." Combo classes indicate column count. Rows generate automatically.
-[Root Style] + [Column Count]
-.grid
-.col__3
-Card
-Outline card
-Clickable Card
-Clickable Outline Card
-[Card Style] + [Scale Factor] + [Background Color]
-.card
-.scaleFactor__heading
-.bg__infoContainer
-Term | -Definition | -Examples | -
---|---|---|
Card Style | -Whether the card uses the "default" or "outline" style. Default does not require a modifier, so you can simply use .card | -
-
|
-
Scale Factor | -The largest font size contained within the card. LiftKit uses this value to provide optical corrections to card padding symmetry. | -
-
|
-
Background Color | -The fill color of the card. Will also set the corresponding text color. See Color for list of options. | -
-
|
-
Display1
- -Display2
- -TitleA
- -TitleB
- -TitleC
- -Heading
- -Subheading
- -Body
- -Callout
- -Label
- -Display1
-Display2
-TitleA
-TitleB
-TitleC
-Heading
-Subheading
- -Body
- -Callout
- -Label
- -Overline
- -Display1
-Display2
-TitleA
-TitleB
-TitleC
-Heading
-Subheading
- -Body
- -Callout
- -Label
- -Overline
- -Display1
-Display2
-TitleA
-TitleB
-TitleC
-Heading
-Subheading
- -Body
- -Callout
- -Label
- -Overline
- -These components deliberately have more elements than necessary for most use cases.This was done to make them faster to implement. It's quicker to delete elements you don't need than to drag in new ones. So, the recommended use for these is to quickly place an instance and then immediately detach it. From there, you can delete elements as needed.
-.card
-.scaleFactor__heading
-.bg-light__surfaceContainerLowest
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
-.card__link
-.scaleFactor__heading
-.bg-light__surfaceContainerLowest
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
-.card__outline__link
-.scaleFactor__heading
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
-.card__quote
-.scaleFactor__heading
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
-[Root Style] + [Background Color]
-{let{active:r,origin:n,start:i,immediate:o,renderType:a,verbose:s,actionItem:u,destination:f,destinationKeys:h,pluginDuration:v,instanceDelay:d,customEasingFn:y,skipMotion:w}=e,T=u.config.easing,{duration:S,delay:m}=u.config;v!=null&&(S=v),m=d??m,a===xD?S=0:(o||w)&&(S=m=0);let{now:R}=t.payload;if(r&&n){let x=R-(i+m);if(s){let z=R-i,$=S+m,J=ui(Math.min(Math.max(0,z/$),1));e=(0,vt.set)(e,"verboseTimeElapsed",$*J)}if(x<0)return e;let q=ui(Math.min(Math.max(0,x/S),1)),F=oE(T,q,y),N={},j=null;return h.length&&(j=h.reduce((z,$)=>{let J=f[$],te=parseFloat(n[$])||0,I=(parseFloat(J)-te)*F+te;return z[$]=I,z},{})),N.current=j,N.position=q,q===1&&(N.active=!1,N.complete=!0),(0,vt.merge)(e,N)}return e},aE=(e=Object.freeze({}),t)=>{switch(t.type){case bD:return t.payload.ixInstances||Object.freeze({});case TD:return Object.freeze({});case ID:{let{instanceId:r,elementId:n,actionItem:i,eventId:o,eventTarget:a,eventStateKey:s,actionListId:u,groupIndex:f,isCarrier:h,origin:v,destination:d,immediate:y,verbose:w,continuous:T,parameterId:S,actionGroups:m,smoothing:R,restingValue:x,pluginInstance:q,pluginDuration:F,instanceDelay:N,skipMotion:j,skipToValue:z}=t.payload,{actionTypeId:$}=i,J=CD($),te=RD(J,$),P=Object.keys(d).filter(L=>d[L]!=null&&typeof d[L]!="string"),{easing:I}=i.config;return(0,vt.set)(e,r,{id:r,elementId:n,active:!1,position:0,start:0,origin:v,destination:d,destinationKeys:P,immediate:y,verbose:w,current:null,actionItem:i,actionTypeId:$,eventId:o,eventTarget:a,eventStateKey:s,actionListId:u,groupIndex:f,renderType:J,isCarrier:h,styleProp:te,continuous:T,parameterId:S,actionGroups:m,smoothing:R,restingValue:x,pluginInstance:q,pluginDuration:F,instanceDelay:N,skipMotion:j,skipToValue:z,customEasingFn:Array.isArray(I)&&I.length===4?SD(I):void 0})}case OD:{let{instanceId:r,time:n}=t.payload;return(0,vt.mergeIn)(e,[r],{active:!0,complete:!1,start:n})}case AD:{let{instanceId:r}=t.payload;if(!e[r])return e;let n={},i=Object.keys(e),{length:o}=i;for(let a=0;a