Philipp
Niestroj
Independent
Software Architect
Alle Field NotesFIELD / 021

Bklit UI verteilt Charts als Quelltext — nicht als Abhängigkeit

Eine Sammlung von React-Chart-Komponenten, die über eine shadcn-Registry ins eigene Repository wandert statt in die package.json.

Meine These

Interessant ist weniger die Chart-Auswahl als der Vertriebsweg: Wer Komponenten per Registry installiert, bekommt Code statt einer Version — mit allen Freiheiten und allen Pflichten, die daraus folgen.

01 / Der Ansatz

Komponenten kopieren statt Abhängigkeit aufnehmen

Bklit UI ist als shadcn-Registry aufgebaut. Ein Befehl wie „npx shadcn@latest add @bklit/line-chart“ legt die Komponente als Datei im eigenen Projekt ab, statt ein npm-Paket in die Abhängigkeiten zu ziehen. Der Code gehört danach dem Projekt: Achsen, Tooltips, Farben und Verhalten lassen sich direkt ändern, ohne gegen die API einer Bibliothek zu arbeiten.

Technisch steht darunter kein eigener Renderer. Die Komponenten sind in React und TypeScript geschrieben und greifen auf Recharts und Visx zurück. Bklit UI liefert damit vor allem die Gestaltungsebene — eine konsistente Optik, abgestimmte Utility-Bausteine und sinnvolle Voreinstellungen über zwei etablierte Zeichenbibliotheken.

  • Installation über die shadcn-CLI statt über den Paketmanager
  • React und TypeScript, darunter Recharts und Visx
  • Utility-Komponenten für Legenden, Grids, Achsen und Tooltips

02 / Der Umfang

Von Balken bis Sankey

Die Sammlung deckt mehr als ein Dutzend Diagrammtypen ab, darunter Fläche, Balken, Candlestick, Torte, Radar, Scatter, Sankey und Sunburst. Das ist genug Breite, um ein Dashboard ohne zweite Bibliothek zu bauen, und deutlich mehr als die üblichen drei Standardtypen.

Ergänzend gibt es Bklit Studio, einen interaktiven Editor zum Zusammenstellen und Exportieren von Diagrammen. Für den Entwurf ist das praktisch, für den Betrieb bleibt der ausgegebene Code die relevante Größe.

03 / Lizenz

MIT für die Charts, proprietär für das Studio

Die Chart-Komponenten stehen unter MIT. Das Studio ist ausdrücklich ausgenommen: Weiterverwendung, Weiterverkauf und Weiterverteilung sind ohne schriftliche Erlaubnis untersagt. Wer das Projekt als Baustein in ein eigenes Produkt übernimmt, sollte diese Zweiteilung vor der ersten Integration lesen und nicht danach.

Das Projekt ist kein Wochenendexperiment: breite Nutzung auf GitHub und eine durchgehende Commit-Historie sprechen für aktive Pflege. Das ersetzt aber keine Aussage über langfristige Wartung — bei Registry-Verteilung trägt dieses Risiko ohnehin überwiegend das nutzende Projekt.

04 / Grenze

Wer den Code erbt, erbt die Wartung

Der größte Vorteil ist zugleich die größte Einschränkung. Eine kopierte Komponente bekommt keine Updates über den Paketmanager. Fehlerkorrekturen und Verbesserungen aus dem Projekt müssen manuell nachgezogen werden, und lokale Anpassungen machen das mit jedem Monat aufwendiger. Für ein kleines Set gepflegter Diagramme ist das unproblematisch, für zwei Dutzend angepasste Komponenten nicht mehr.

Zwei Punkte bleiben zusätzlich Eigenleistung: Bündelgröße, wenn Recharts und Visx parallel im Build landen, und Barrierefreiheit. Ein Diagramm ist erst zugänglich, wenn es neben der Grafik eine textliche oder tabellarische Entsprechung gibt, Farben ausreichend kontrastieren und Farbe nicht der einzige Bedeutungsträger ist. Diese Arbeit nimmt keine Komponentensammlung ab.

Kurzfazit

Eine gute Vorlage, keine Abkürzung

Bklit UI liefert gestalterisch sauber abgestimmte Diagramme über bewährte Zeichenbibliotheken und überlässt dem Projekt die volle Kontrolle über den Code. Das ist die richtige Wahl, wenn Diagramme Teil des Produkts sind und nicht nur eine Beigabe.

Interessant für
React-Projekte, die eigenständige, anpassbare Diagramme brauchen und die Komponenten bewusst selbst pflegen wollen.
Im Blick behalten
Registry-Verteilung bedeutet manuelle Updates; Bündelgröße, Barrierefreiheit und die Lizenzgrenze zum Studio bleiben in der eigenen Verantwortung.
Quellen & Transparenz

Einordnung auf Basis der Projektseite, der Dokumentation und des öffentlichen Repositorys; kein gesponserter Beitrag und kein Langzeiteinsatz.