So erstellst du ein Linear-artiges Interface mit Next.js und shadcn/ui

Linears Interface gilt seit langem als Goldstandard für Projektmanagement-Tools. Schnell, minimalistisch, mit durchdachter Tastaturnavigation und standardmäßigem Dark Theme. Es überrascht nicht, dass viele Webentwickler davon träumen, eine ähnliche UX in ihren eigenen Produkten oder Hobbyprojekten zu reproduzieren.

Kürzlich bin ich auf das Open-Source-Repository Circle vom französischen Entwickler ln-dev7 gestoßen. Es ist ein elegantes Dashboard für Aufgaben, Projekte und Teamverwaltung, gebaut mit Next.js, TypeScript und shadcn/ui. Das Projekt hat über dreitausend Stars auf GitHub gesammelt, und es gibt gute Gründe dafür.

Warum eine weitere Dashboard-Vorlage

Jeder, der schon einmal komplexe Admin-Panels erstellt hat, kennt das Prozedere. Du musst ein Projekt aufsetzen, eine Sidebar konfigurieren, Tabellen mit Filtern bauen, Task-Karten anordnen, Theme-Switching einrichten und die Responsivität für mobile Bildschirme anpassen. Am Ende geht die Hälfte der Zeit für das grundlegende Layout drauf, statt für die Business-Logik.

Circle bietet ein sofort einsatzbereites UI-Skelett, das direkt aus Linears Produkt-System stammt. Es enthält:

• Seiten zur Ansicht von Aufgabenlisten mit Filterung nach Status und Priorität
• Bereich zur Verwaltung von Projekten und Teams
• Durchdachten Dark Mode und saubere Typografie
• Direkt einsetzbare UI-Komponenten basierend auf Tailwind CSS

Allerdings ist es wichtig, die Grenzen zu verstehen. Das Repository enthält nur das Frontend, nicht ein vollständiges Backend mit Datenbank. Die gesamte Datenverarbeitung basiert auf Client-State und Mocks. Wenn du einen sofort einsatzbereiten Service für dein Team brauchst, funktioniert Circle nicht out-of-the-box. Aber als Ausgangspunkt für deine eigene Anwendung ist es ein ausgezeichnetes Tool.

Unter der Haube

Der Autor hat das Rad nicht neu erfunden und setzt auf einen vertrauten Tech-Stack.

Im Kern basiert alles auf dem Next.js React-Framework mit App Router. Das gesamte Styling erfolgt über Tailwind CSS, und die Komponenten sind auf shadcn/ui aufgebaut. Für alle, die es nicht kennen: shadcn/ui ist keine traditionelle Komponentenbibliothek wie Material UI oder Ant Design. Anstatt eine schwere Abhängigkeit zu installieren, kopierst du den Quellcode der benötigten Komponenten direkt in deinen Projektbaum und passt sie nach Bedarf an.

Der Code ist in TypeScript geschrieben. Die Verzeichnisstruktur ist Standard für Next.js:

• Der app-Ordner enthält Routing und Anwendungsseiten
• Der Ordner components enthält wiederverwendbare Interface-Elemente und shadcn/ui-Blöcke
• Der Ordner lib enthält Utilities und Helfer für die Arbeit mit Styles
• Der public-Ordner speichert statische Icons und Grafiken

Dadurch ist das Projekt leicht anpassbar. Du willst Farbakzente ändern? Bearbeite die Tailwind-Variablen. Du brauchst eine neue Art von Aufgabentabelle? Kopiere eine bestehende React-Komponente und modifiziere ihre Props.

Schnellstart und Arbeiten mit dem Projekt

Du kannst das Projekt lokal in nur wenigen Minuten zum Laufen bringen. Du brauchst Node.js und den pnpm-Paketmanager.

Zuerst klone das Repository:

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

Installiere die Abhängigkeiten und starte den Development Server:

pnpm install
pnpm dev

Danach ist die App unter http://localhost:3000 verfügbar. Das Erste, was auffällt, ist, wie flüssig es sich anfühlt. Übergänge zwischen Bereichen erfolgen ohne Verzögerungen, und die Komponenten sind sauber angeordnet.

Wenn du vorhast, Circle als Grundlage für einen echten Service zu nutzen, musst du ein Backend an die UI anbinden. Der einfachste Weg führt über Supabase, Prisma mit PostgreSQL oder Server Actions in Next.js. Du musst die lokalen Mocks in Abfragen gegen deine Datenbank umschreiben und Authentifizierung einrichten.

Was ist der praktische Nutzen

Ich würde zwei Hauptszenarien hervorheben, in denen Circle dir Zeit spart.

Erstens ist es ein Schnellstart für Hobbyprojekte und Prototypen. Wenn du einen Task-Tracker, ein CRM-System oder ein internes Verwaltungspanel für einen Kunden baust, frisst das UI-Layout normalerweise Tage an Arbeit. Mit Circle bekommst du ein fertiges Design mit sinnvollen Abständen und einer passenden Farbpalette.

Zweitens ist es eine solide Codebasis zum Lernen von shadcn/ui und Next.js-Ansätzen. Du kannst dir anschauen, wie der Autor Layouts organisiert, komplexe Tabellen baut und Interface-Komponenten konfiguriert.

Was fehlt

Die README des Repositories ist ziemlich spärlich. Sie enthält praktisch keine Architekturbeschreibung oder Anleitungen zur Erweiterung. Du musst alles selbst herausfinden, obwohl der Code selbst sauber und lesbar ist.

Beachte auch, dass die grundlegenden Controls hier auf Standard-shadcn/ui-Patterns basieren. Wenn du komplexe Drag-and-Drop-Logik für Kanban-Boards oder Echtzeit-Updates über WebSockets brauchst, muss das alles von Grund auf neu gebaut und konfiguriert werden.

Circle ist eine solide Open-Source-Interface-Vorlage für alle, die Linears Ästhetik und den Next.js-mit-Tailwind-CSS-Stack mögen. Das Projekt beansprucht nicht, ein fertiger Task-Tracker out-of-the-box zu sein, aber als Ausgangspunkt für dein eigenes Frontend spart es Dutzende Stunden routinemäßiger Layout-Arbeit.

Wenn du ein neues Projekt mit Aufgabenverfolgung planst oder einfach nach einer frischen shadcn/ui-Vorlage suchst, schau dir das Repository auf jeden Fall an.