Cómo construir una interfaz estilo Linear con Next.js y shadcn/ui

La interfaz de Linear ha sido durante mucho tiempo el estándar de oro para las herramientas de gestión de proyectos. Rápida, minimalista, con una navegación por teclado bien pensada y un tema oscuro por defecto. No es de extrañar que muchos desarrolladores web sueñen con recrear una UX similar en sus propios productos o proyectos personales.

Hace poco descubrí el repositorio Circle de código abierto del desarrollador francés ln-dev7. Es un elegante dashboard para seguimiento de tareas, proyectos y equipos construido con Next.js, TypeScript y shadcn/ui. El proyecto ha acumulado más de tres mil estrellas en GitHub, y hay buenas razones para ello.

¿Por qué otra plantilla de dashboard?

Cualquiera que haya intentado construir paneles de administración complejos conoce el proceso. Necesitas estructurar un proyecto, configurar una barra lateral, crear tablas con filtros, diseñar tarjetas de tareas, configurar el cambio de tema y ajustar la capacidad de respuesta para pantallas móviles. Al final, la mitad del tiempo se dedica al diseño básico en lugar de la lógica de negocio.

Circle ofrece un esqueleto de UI listo para usar que parece sacado directamente del sistema de productos de Linear. Incluye:

• Páginas para visualizar listas de tareas con filtrado por estado y prioridad
• Sección para gestionar proyectos y equipos
• Tema oscuro bien pensado y tipografía limpia
• Componentes de UI listos para usar basados en Tailwind CSS

Dicho esto, es importante entender los límites. El repositorio contiene solo el frontend, no un backend completo con base de datos. Todo el manejo de datos depende del estado del cliente y mocks. Si necesitas un servicio listo para desplegar para tu equipo, Circle no funcionará de inmediato. Pero como punto de partida para tu propia aplicación, es una herramienta excelente.

Bajo el capó

El autor no reinventó la rueda y optó por una pila tecnológica familiar.

En su núcleo está el framework React Next.js con App Router. Todo el estilizado se hace a través de Tailwind CSS, y los componentes están construidos sobre shadcn/ui. Para quienes no están familiarizados: shadcn/ui no es una biblioteca de componentes tradicional como Material UI o Ant Design. En lugar de instalar una dependencia pesada, copias el código fuente de los componentes que necesitas directamente en el árbol de tu proyecto y los personalizas como mejor te parezca.

El código está escrito en TypeScript. La estructura de directorios es estándar para Next.js:

• La carpeta app contiene el enrutamiento y las páginas de la aplicación
• La carpeta components contiene elementos de interfaz reutilizables y bloques de shadcn/ui
• La carpeta lib contiene utilidades y ayudantes para trabajar con estilos
• La carpeta public almacena iconos estáticos y gráficos

Gracias a esto, el proyecto es fácil de personalizar. ¿Quieres cambiar los acentos de color? Edita las variables de Tailwind. ¿Necesitas agregar un nuevo tipo de tabla de tareas? Copia un componente React existente y modifica sus props.

Inicio rápido y trabajo con el proyecto

Puedes poner en marcha el proyecto localmente en solo un par de minutos. Necesitarás Node.js y el gestor de paquetes pnpm.

Primero, clona el repositorio:

git clone https://github.com/ln-dev7/circle.git
cd circle

Instala las dependencias e inicia el servidor de desarrollo:

pnpm install
pnpm dev

Después de eso, la aplicación está disponible en http://localhost:3000. Lo primero que notas es lo suave que se siente. Las transiciones entre secciones ocurren sin retrasos, y los componentes están ordenadamente distribuidos.

Si planeas usar Circle como base para un servicio real, necesitarás conectar un backend a la interfaz. El camino más simple es conectar Supabase, Prisma con PostgreSQL, o Server Actions en Next.js. Necesitarás reescribir los mocks locales a consultas contra tu base de datos y configurar la autenticación.

¿Cuál es el valor práctico?

Destacaría dos escenarios principales donde Circle te ahorrará tiempo.

Primero, es un inicio rápido para proyectos personales y prototipos. Si estás construyendo un rastreador de tareas, sistema CRM, o panel de gestión interno para un cliente, el diseño de UI generalmente consume días de trabajo. Con Circle, obtienes un diseño listo para usar con espaciado sensato y una paleta de colores adecuada.

Segundo, es una base de código sólida para aprender enfoques de shadcn/ui y Next.js. Puedes ver cómo el autor organiza los diseños, construye tablas complejas y configura los componentes de la interfaz.

Lo que le falta

El README del repositorio es bastante escueto. Prácticamente carece de cualquier descripción de arquitectura o guías para extenderlo. Quedas librado a ti mismo para descubrir las cosas, aunque el código en sí es limpio y legible.

Ten en cuenta también que los controles básicos aquí dependen de patrones estándar de shadcn/ui. Si necesitas lógica compleja de arrastrar y soltar para tableros Kanban o actualizaciones en tiempo real a través de WebSockets, todo eso tendrá que ser construido y configurado desde cero.

Circle es una plantilla de interfaz sólida de código abierto para cualquiera que le guste la estética de Linear y la pila de Next.js con Tailwind CSS. El proyecto no pretende ser un rastreador de tareas listo para usar de inmediato, pero como punto de partida para tu propio frontend, ahorra docenas de horas de trabajo rutinario de diseño.

Si estás planeando un nuevo proyecto con seguimiento de tareas o simplemente buscas una plantilla fresca de shadcn/ui, definitivamente revisa el repositorio.