Como criar uma interface no estilo Linear com Next.js e shadcn/UI

A interface do Linear tem sido há muito tempo o padrão-ouro para ferramentas de gerenciamento de projetos. Rápida, minimalista, com navegação por teclado bem pensada e tema escuro por padrão. Não é surpresa que muitos desenvolvedores web sonhem em recriar uma UX semelhante em seus próprios produtos ou projetos pessoais.

Recentemente, encontrei o repositório open-source Circle do desenvolvedor francês ln-dev7. É um elegante dashboard de tarefas, projetos e acompanhamento de equipes construído com Next.js, TypeScript e shadcn/UI. O projeto acumulou mais de três mil estrelas no GitHub, e há boas razões para isso.

Por que outro template de dashboard

Qualquer pessoa que já tentou construir painéis administrativos complexos conhece a rotina. Você precisa fazer o scaffold de um projeto, configurar uma sidebar, construir tabelas com filtros, organizar cards de tarefas, configurar troca de tema e ajustar a responsividade para telas mobile. No final, metade do tempo é gasta com layout básico em vez de lógica de negócio.

O Circle oferece um esqueleto de UI pronto que parece saído diretamente do sistema de produtos do Linear. Ele inclui:

• Páginas para visualizar listas de tarefas com filtragem por status e prioridade
• Seção para gerenciar projetos e equipes
• Modo escuro bem pensado e tipografia limpa
• Componentes de UI prontos para uso baseados em Tailwind CSS

Dito isso, é importante entender os limites. O repositório contém apenas o frontend, não um backend completo com banco de dados. Todo o tratamento de dados depende de estado no cliente e mocks. Se você precisa de um serviço pronto para deploy para sua equipe, o Circle não vai funcionar fora da caixa. Mas como ponto de partida para sua própria aplicação, é uma ferramenta excelente.

Sob o capô

O autor não reinventou a roda e optou por uma stack familiar.

No seu núcleo está o framework React Next.js com App Router. Todo o estilo é feito via Tailwind CSS, e os componentes são construídos no shadcn/UI. Para quem não conhece: shadcn/UI não é uma biblioteca de componentes tradicional como Material UI ou Ant Design. Em vez de instalar uma dependência pesada, você copia o código fonte dos componentes que precisa diretamente na árvore do seu projeto e personaliza como quiser.

O código é escrito em TypeScript. A estrutura de diretórios é padrão para Next.js:

• A pasta 2 contém roteamento e páginas da aplicação
• A pasta 3 mantém elementos de interface reutilizáveis e blocos shadcn/UI
• A pasta 4 contém utilitários e ajudantes para trabalhar com estilos
• A pasta 5 armazena ícones estáticos e gráficos

Por isso, o projeto é fácil de personalizar. Quer mudar os acentos de cor? Edite as variáveis do Tailwind. Precisa adicionar um novo tipo de tabela de tarefas? Copie um componente React existente e modifique suas props.

Início rápido e trabalho com o projeto

Você pode iniciar o projeto localmente em apenas alguns minutos. Você vai precisar de Node.js e do gerenciador de pacotes pnpm.

Primeiro, clone o repositório:

Instale as dependências e inicie o servidor de desenvolvimento:

Depois disso, o app fica disponível em 6. A primeira coisa que você percebe é o quão suave ele parece. As transições entre seções acontecem sem atrasos, e os componentes são organizados de forma limpa.

Se você planeja usar o Circle como base para um serviço real, você vai precisar conectar um backend à UI. O caminho mais simples é conectar Supabase, Prisma com PostgreSQL, ou Server Actions no Next.js. Você vai precisar reescrever os mocks locais para consultas ao seu banco de dados e configurar autenticação.

Qual é o valor prático

Eu destacaria dois cenários principais onde o Circle vai te poupar tempo.

Primeiro, é um início rápido para projetos pessoais e protótipos. Se você está construindo um rastreador de tarefas, sistema CRM, ou painel de gerenciamento interno para um cliente, o layout da UI geralmente consome dias de trabalho. Com o Circle, você obtém um design pronto com espaçamento sensato e uma paleta de cores adequada.

Segundo, é uma base de código sólida para aprender abordagens de shadcn/UI e Next.js. Você pode espiar como o autor organiza layouts, constrói tabelas complexas e configura componentes de interface.

O que está faltando

O README do repositório é bastante escasso. Praticamente não tem descrição da arquitetura ou guias para estendê-lo. Você fica por conta própria para descobrir as coisas, embora o código em si seja limpo e legível.

Também tenha em mente que os controles básicos aqui dependem de padrões padrão do shadcn/UI. Se você precisa de lógica complexa de arrastar e soltar para quadros Kanban ou atualizações em tempo real via WebSockets, tudo isso precisará ser construído e configurado do zero.

Circle é um template de interface open-source sólido para qualquer pessoa que gosta da estética do Linear e da stack Next.js com Tailwind CSS. O projeto não afirma ser um rastreador de tarefas pronto para uso fora da caixa, mas como ponto de partida para seu próprio frontend, ele economiza dezenas de horas de trabalho rotineiro de layout.

Se você está planejando um novo projeto com rastreamento de tarefas ou apenas procurando um template novo de shadcn/UI, definitivamente check out o repositório.