Comment créer une interface de style Linear avec Next.js et shadcn/ui

L'interface de Linear est depuis longtemps la référence en matière d'outils de gestion de projet. Rapide, minimaliste, avec une navigation clavier bien pensée et un thème sombre par défaut. Il n'est pas surprenant que de nombreux développeurs web rêvent de recréer une UX similaire dans leurs propres produits ou projets personnels.

Récemment, je suis tombé sur le dépôt open-source Circle du développeur français ln-7. C'est un élégant tableau de bord de gestion des tâches, des projets et des équipes, construit avec Next.js, TypeScript et shadcn/ui. Le projet a recueilli plus de trois mille étoiles sur GitHub, et il y a de bonnes raisons à cela.

Pourquoi un autre modèle de tableau de bord

Quiconque a essayé de construire des panneaux d'administration complexes connaît la routine. Vous devez échafauder un projet, configurer une barre latérale, construire des tableaux avec des filtres, disposer des cartes de tâches, configurer la commutation de thème et ajuster la réactivité pour les écrans mobiles. À la fin, la moitié du temps est consacré à la mise en page de base plutôt qu'à la logique métier.

Circle propose un squelette d'interface prêt à l'emploi qui semble tout droit sorti du système de produits de Linear. Il comprend :

• Des pages pour visualiser les listes de tâches avec filtrage par statut et priorité
• Une section pour gérer les projets et les équipes
• Un mode sombre bien pensé et une typographie épurée
• Des composants d'interface prêts à l'emploi basés sur Tailwind CSS

Cela dit, il est important de comprendre les limites. Le dépôt ne contient que le frontend, pas un backend complet avec une base de données. Toute la gestion des données repose sur l'état du client et des mocks. Si vous avez besoin d'un service prêt à déployer pour votre équipe, Circle ne fonctionnera pas out of the box. Mais comme point de départ pour votre propre application, c'est un excellent outil.

Sous le capot

L'auteur n'a pas réinventé la roue et a opté pour une pile familière.

Au cœur de l'application se trouve le framework React Next.js avec App Router. Tout le style est fait via Tailwind CSS, et les composants sont construits sur shadcn/ui. Pour ceux qui ne connaissent pas : shadcn/ui n'est pas une bibliothèque de composants traditionnelle comme Material UI ou Ant Design. Au lieu d'installer une dépendance lourde, vous copiez le code source des composants dont vous avez besoin directement dans l'arborescence de votre projet et vous les personnalisez à votre guise.

Le code est écrit en TypeScript. La structure des répertoires est standard pour Next.js :

• Le dossier �2� contient le routage et les pages de l'application
• Le dossier �3� contient les éléments d'interface réutilisables et les blocs shadcn/ui
• Le dossier �4� contient les utilitaires et assistants pour travailler avec les styles
• Le dossier �5� stocke les icônes statiques et les graphiques

De ce fait, le projet est facile à personnaliser. Vous souhaitez modifier les accents de couleur ? Modifiez les variables Tailwind. Besoin d'ajouter un nouveau type de tableau de tâches ? Copiez un composant React existant et modifiez ses props.

Démarrage rapide et travail avec le projet

Vous pouvez lancer le projet localement en quelques minutes seulement. Vous aurez besoin de Node.js et du gestionnaire de paquets pnpm.

Tout d'abord, clonez le dépôt :

�0�

Installez les dépendances et lancez le serveur de développement :

�1�

Après cela, l'application est disponible à �6�. La première chose que vous remarquez est la fluidité de l'interface. Les transitions entre les sections se font sans délais, et les composants sont bien agencés.

Si vous envisagez d'utiliser Circle comme base pour un service réel, vous devrez connecter un backend à l'interface. La solution la plus simple consiste à intégrer Supabase, Prisma avec PostgreSQL ou les Server Actions de Next.js. Vous devrez refactoriser les mocks locaux en requêtes vers votre base de données et mettre en place l'authentification.

Quelle est la valeur pratique

Je soulignerais deux scénarios principaux où Circle vous fera gagner du temps.

Premièrement, c'est un démarrage rapide pour les projets personnels et les prototypes. Si vous construisez un gestionnaire de tâches, un système CRM ou un panneau de gestion interne pour un client, la mise en page de l'interface utilisateur dévore généralement des journées de travail. Avec Circle, vous disposez d'un design prêt à l'emploi avec un espacement cohérent et une palette de couleurs appropriée.

Deuxièmement, c'est une base de code solide pour apprendre les approches shadcn/ui et Next.js. Vous pouvez observer comment l'auteur organise les mises en page, construit des tableaux complexes et configure les composants d'interface.

Ce qui manque

Le README du dépôt est assez maigre. Il manque pratiquement toute description de l'architecture ou des guides pour l'étendre. Vous êtes laissé à vous débrouiller seul, bien que le code lui-même soit propre et lisible.

Gardez également à l'esprit que les contrôles de base ici reposent sur les modèles standard de shadcn/ui. Si vous avez besoin d'une logique complexe de glisser-déposer pour les tableaux Kanban ou de mises à jour en temps réel via WebSockets, tout cela devra être construit et configuré à partir de zéro.

Circle est un modèle d'interface open-source solide pour tous ceux qui apprécient l'esthétique de Linear et la pile Next.js avec Tailwind CSS. Le projet ne prétend pas être un gestionnaire de tâches prêt à l'emploi out of the box, mais comme point de départ pour votre propre frontend, il fait gagner des dizaines d'heures de travail de mise en page routinier.

Si vous planifiez un nouveau projet avec le suivi des tâches ou si vous cherchez simplement un nouveau modèle shadcn/ui, consultez certainement le dépôt.