Chainlift/liftkit

O que é?

Recursos principais

• 01Fórmulas de escala, espaçamento e cor que aplicam boas práticas de layout e uso de cores.
• 02Comando de CLI para inicializar arquivos de configuração do LiftKit em um projeto Next.js.
• 03Instale todos os componentes, um componente específico ou apenas o CSS base e os tipos.
• 04O CSS de componentes não utilizado é removido durante o build.
• 05Inclui templates para Figma e Webflow.

Casos de uso

• Prototipar uma interface Next.js com escalas consistentes de espaçamento e cor.
• Explorar uma abordagem baseada em design system em um projeto que não usa Tailwind.
• Começar a partir de um arquivo do Figma que espelha as variáveis dos componentes.

Início rápido

1. 1

   Clone o projeto de template do LiftKit

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

   Instale as dependências na pasta do projeto

   npm install
3. 3

   Instale todos os componentes e estilos do LiftKit

   npm run add all

Antes de usar

• !O README informa que o uso em produção não é recomendado e que o projeto está sendo reescrito.
• !Atualmente, há suporte apenas ao Next.js, sem Tailwind.
• !A configuração requer Node.js, npm e Git. O README informa que, em março de 2026, a reescrita estava aproximadamente 50% concluída.

Tópicos

Perguntas frequentes

O que é liftkit?

Framework de componentes de UI CSS-first baseado em fórmulas de design para escala, espaçamento e cor; atualmente voltado para Next.js e ainda não recomendado para produção. LiftKit é um framework de UI baseado em um conjunto de fórmulas independentes de plataforma para escala, espaçamento e cor. A proposta é criar interfaces visualmente equilibradas aplicando regras como simetria óptica, espaçamento proporcional e transições suaves de cor, para que desenvolvedores sem formação em design também consigam resultados consistentes.

liftkit é gratuito? Qual é a licença?

liftkit é open source sob a licença Apache-2.0. Confira os termos da licença antes de usá-lo em produtos comerciais.

liftkit ainda é mantido?

Manutenção ativa. O último commit de liftkit foi em 26 de out. de 2026.

Para que posso usar liftkit?

Prototipar uma interface Next.js com escalas consistentes de espaçamento e cor. Explorar uma abordagem baseada em design system em um projeto que não usa Tailwind. Começar a partir de um arquivo do Figma que espelha as variáveis dos componentes.

Como instalar liftkit?

Clone o projeto de template do LiftKit: git clone https://github.com/Chainlift/liftkit-template.git Instale as dependências na pasta do projeto: npm install Instale todos os componentes e estilos do LiftKit: npm run add all

Onde consigo liftkit?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/Chainlift/liftkit