Repolode
Enviar
Chainlift

Chainlift/liftkit

Framework de componentes UI con CSS como prioridad, basado en fórmulas de diseño para escala, espaciado y color; actualmente compatible con Next.js y aún no recomendado para producción.

Ver en GitHubSitio web
Estrellas
3,269
Forks
63
Issues abiertos
13
Último commit
hace 12 días

¿Qué es?

LiftKit es un framework de UI basado en un conjunto de fórmulas independientes de la plataforma para escala, espaciado y color. Su objetivo es crear interfaces visualmente equilibradas mediante reglas como la simetría óptica, el espaciado proporcional y las transiciones de color suaves, para que los desarrolladores sin formación en diseño también puedan obtener resultados coherentes.

El proyecto incluye una CLI (`npx liftkit init`) que agrega archivos de configuración a un proyecto de Next.js, y un comando de instalación que permite añadir todos los componentes, uno solo o únicamente el CSS base y los tipos. El CSS que no se usa se elimina durante la compilación. La versión actual es compatible con Next.js sin Tailwind, y también se incluyen plantillas para Figma y Webflow.

Los mantenedores indican que no recomiendan usar la versión actual en producción y que están trabajando en una reescritura, con nuevos componentes previstos para usar primitivas de Base UI.

Funciones clave

  • 01Fórmulas de escala, espaciado y color que aplican buenas prácticas de diseño de layouts y color.
  • 02Comando de CLI para inicializar los archivos de configuración de LiftKit en un proyecto de Next.js.
  • 03Instalación de todos los componentes, de un solo componente o únicamente del CSS base y los tipos.
  • 04El CSS de los componentes que no se usan se elimina durante la compilación.
  • 05Se incluyen plantillas para Figma y Webflow.

Casos de uso

  • Crear prototipos de interfaces de Next.js con escalas coherentes de espaciado y color.
  • Explorar un enfoque basado en sistemas de diseño en un proyecto que no usa Tailwind.
  • Partir de un archivo de Figma que refleje las variables de los componentes.

Inicio rápido

  1. 1

    Clona el proyecto de plantilla de LiftKit

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

    Instala las dependencias en la carpeta del proyecto

    npm install
  3. 3

    Instala todos los componentes y estilos de LiftKit

    npm run add all

Antes de usarlo

  • El README indica que no se recomienda su uso en producción y que se está reescribiendo.
  • Actualmente solo es compatible con Next.js y no incluye Tailwind.
  • La configuración requiere Node.js, npm y Git. El README indica que, a marzo de 2026, la reescritura estaba completada aproximadamente al 50 %.

Temas

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

Preguntas frecuentes

¿Qué es liftkit?
Framework de componentes UI con CSS como prioridad, basado en fórmulas de diseño para escala, espaciado y color; actualmente compatible con Next.js y aún no recomendado para producción. LiftKit es un framework de UI basado en un conjunto de fórmulas independientes de la plataforma para escala, espaciado y color. Su objetivo es crear interfaces visualmente equilibradas mediante reglas como la simetría óptica, el espaciado proporcional y las transiciones de color suaves, para que los desarrolladores sin formación en diseño también puedan obtener resultados coherentes.
¿liftkit es gratuito? ¿Qué licencia tiene?
liftkit es open source bajo la licencia Apache-2.0. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿liftkit sigue mantenido?
Mantenimiento activo. El último commit de liftkit fue el 26 oct 2026.
¿Para qué puedo usar liftkit?
Crear prototipos de interfaces de Next.js con escalas coherentes de espaciado y color. Explorar un enfoque basado en sistemas de diseño en un proyecto que no usa Tailwind. Partir de un archivo de Figma que refleje las variables de los componentes.
¿Cómo se instala liftkit?
Clona el proyecto de plantilla de LiftKit: git clone https://github.com/Chainlift/liftkit-template.git Instala las dependencias en la carpeta del proyecto: npm install Instala todos los componentes y estilos de LiftKit: npm run add all
¿Dónde consigo liftkit?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Chainlift/liftkit

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados