Carbon Components Angular: IBMs Designsystem als Angular-Bibliothek
Eine Angular-Implementierung des Carbon Design Systems für IBM. Jetzt können wir npm start ausführen und mit der Entwicklung unserer Anwendung beginnen!
Auf einen Blick
- Was ist das?
- Die Angular-Implementierung des Carbon Design Systems bringt IBM-Styling per npm in eigene Apps. Setup mit @carbon/styles, Support-Matrix von Angular 6 bis 21, Komponentenphilosophie und der laufende RC-Zyklus zu v6 im Detail.
- Für wen ist es gedacht?
- Carbon Components Angular passt für Angular-Teams ab Version 14, die IBM-nahe oder konservativ gestylte Enterprise-Oberflächen bauen und ein gepflegtes Komponentensystem statt eigener Widgets wollen. Es passt nicht für Projekte auf Angular 6 bis 13, die auf aktiven Support angewiesen sind, denn diese Versionen laufen nur noch über Community-Support der Reihe v3 und v4.
- Darf ich es kommerziell nutzen?
- Ja. Apache-2.0 ist eine freizügige Lizenz: Sie dürfen darauf aufbauende Software nutzen, verändern und verkaufen, solange Sie die Urheberrechts- und Lizenzhinweise beibehalten.
- Wird es noch gepflegt?
- Ja. Die letzten Commits kamen vor 5 Tagen.
- In welcher Sprache ist es geschrieben?
- Hauptsächlich TypeScript, laut der Sprachstatistik von GitHub.
Die Antworten beruhen auf den GitHub-Daten des Projekts (zuletzt abgeglichen am 14. September 2026) und auf unserer Analyse. Sie sind keine Rechtsberatung.
TIEFGEHENDE OPEN-SOURCE-ANALYSE
Carbon Components Angular als Angular-Pfad ins Carbon Design System
Das Carbon Design System ist IBMs Gestaltungsgrundlage, und carbon-components-angular (carbon-design-system/carbon-components-angular, TypeScript, Apache-2.0) ist seine Angular-Implementierung. Die Metadaten beschreiben das Paket als Angular-Implementierung des Carbon Design Systems for IBM, die Projektseite angular.carbondesignsystem.com dokumentiert die Komponenten. Laut Repository zählen rund 560 Sterne und 319 Forks zum Projekt, dem Standard-Branch master.
Die Positionierung ist nützlich zu verstehen: Es handelt sich nicht um das Kernpaket des Designsystems, sondern um die Angular-Übersetzung seiner Bausteine. Wer eine IBM-konforme Weboberfläche in Angular baut, bekommt damit die Komponenten, Styles und Icons als npm-Pakete, ohne das Designsystem selbst nachbauen zu müssen. Für andere Frameworks existieren separate Implementierungen, dieser Artikel bleibt bei der Angular-Variante.
Setup über npx @angular/cli new und src/styles.scss
Der dokumentierte Einstieg beginnt mit einem frischen Projekt: npx @angular/cli new my-project --style=scss, dann cd my-project und npm i --save carbon-components-angular @carbon/styles @carbon/icons. Drei Pakete, kein Umweg über Konfigurationstools.
In src/styles.scss folgt der Style-Block: @use '@carbon/styles/scss/config' with (...) setzt $use-flexbox-grid: true und $font-path: '@ibm/plex', wobei der Kommentar im README erklärt, dass CSS Grid seit v11 das Standardrastersystem ist und der Font-Pfad ohne Tilde für vite ab Angular 16 nötig wird. Danach kommen @use '@carbon/styles' und das Setzen des Themes via @include styles.theme(styles.$white) auf dem html-Element. Ein Detail schließt den Setup ab: Eine Datei module.d.ts im src-Verzeichnis deklariert @carbon/icons/* als Modul, damit die Icon-Importe typisieren. Danach startet npm start die Anwendung, und das README betont, dass diese Kombination aus @angular/cli und @carbon/styles-SCSS die empfohlene, aber nicht die einzige Variante ist.
Support-Matrix: v5 deckt Angular 14 bis 21 ab
Das README führt zwei Matrizen, und beide tragen für die Planung Gewicht. Die erste verknüpft Angular-Versionen mit Bibliothekshauptversionen: v3 unterstützt Angular 6 bis 8, v4 unterstützt Angular 7 bis 15 mit Ausnahme von 9, und v5 unterstützt Angular 14 bis 21. Die zweite Matrix stuft den Support ein: v1 und v2 sind vollständig außerhalb des Supports, v3 und v4 laufen nur noch mit Community-Support, v5 ist die einzige Version mit aktivem Support.
Die Regeln dazu stehen im Text: Das Projekt plant, die neueste und die vorherige Version zu unterstützen, darüber hinaus gibt es keine Garantien. Community-Support bedeutet dabei laut Definition, dass die Pflege primär von Issue-Meldungen und Beiträgen aus der Community abhängt, kleine Fixes werden zurückportiert, wenn anwendbar. Aktiver Support verspricht neue Features, neue Komponenten, Bugfixes und Kompatibilität mit dem Carbon Design System und aktuellen Angular-Versionen. Teams auf Angular 6 bis 13 wissen damit genau, woran sie sind.
Komponentenphilosophie: minimaler Zustand und Delegation an den Verbraucher
Das README formuliert eine klare Philosophie für die Bausteine. Komponenten sollen die kleinste Berechnungseinheit sein, Seiten und Anwendungen entstehen aus vielen Komponenten. Sie sollen wann immer möglich an den Verbraucher delegieren und die Anwendung als einzige Quelle der Wahrheit betrachten, also möglichst zustandslos bleiben.
Zwei weitere Punkte schärfen das Bild: Eine Komponente soll eine Sache gut machen, Über-Spezialisierung ist zu vermeiden, und der Styleguide ist keine Pflicht, die jede Komponente Punkt für Punkt erfüllen muss. Der Leitfaden liefert übergreifende Funktionalität, die Komponenten sollen produktspezifische Designs ermöglichen, ohne eigene Zusatzfunktionen einzubauen. Wer diese Richtung verinnerlicht, versteht auch die API-Gestaltung der Bibliothek: wenig magischer Zustand, klare Schnittstellen, Entscheidungen dort, wo das Produkt sie trifft.
Beitragen über npm run storybook, npm test und npm run lint
Der Beitragspfad beginnt mit Fork und Klon von carbon-design-system/carbon-components-angular, gefolgt von npm install und npm run storybook für die Komponentenansicht. Neue Komponenten landen als Ordner unter src mit Code, Styles, Tests und Story, exportiert aus index.ts. Fixes bringen die Dokumentation auf Stand und ziehen idealerweise einen Testfall nach sich. Vor jedem PR laufen npm test und npm run lint, und der Angular-Styleguide gilt als Maßstab.
Die PR-Regeln fordern kleine, fokussierte Änderungen, eine Beschreibung, Screenshots für Designreferenzen und den Bezug zum Issue, closes #123 schließt es beim Merge, issue #123 referenziert es nur. Nicht fertige PRs bekommen das Präfix WIP: und ein WIP-Label, zum Review gehört das Label needs review. Für Issues gilt: ein Defekt pro Issue, ein Titel mit Komponente und Version, dazu betroffene Versionen, Reproduktionsschritte, erwartetes und aktuelles Verhalten, optional Screenshots, Codeschnipsel und ein Link auf Codesandbox. IBMer müssen vor Beiträgen die Schritte bei W3 Developer absolvieren, ein Hinweis auf den internen Prozess dahinter.
IBM Telemetry, Apache-2.0 und der RC-Zyklus zu v6.0.0-rc.24
Zwei Punkte betreffen den Betrieb direkt. Das Paket verwendet laut README IBM Telemetry, um de-identifizierte und anonymisierte Metrikdaten zu sammeln; die Installation gilt als Zustimmung, ein Opt-out ist über die bereitgestellte Dokumentation möglich. Wer in Umgebungen mit strengen Datenschutzvorgaben arbeitet, sollte diesen Schritt vor der ersten npm-Installation einplanen. Die Apache-2.0-Lizenz erlaubt Nutzung, Modifikation, Verbreitung und Unterlizenzierung einschließlich der Patentlizenz, Garantie oder Support verspricht sie naturgemäß nicht.
Zur Reife sei auf die Release-Historie verwiesen: Der jüngste Tag ist v6.0.0-rc.24 vom 10. August 2026, der aktive stabile Zweig liegt bei v5.72.2 vom 30. Juni 2026. Die hohe Zahl der RC-Zyklen zeigt, dass die v6-Umstellung im Gange ist, und die 234 offenen Issues spiegeln die Größe der Community. Wer heute produktiv geht, fährt auf v5, wer die Zukunft vorbereitet, prüft den RC-Zweig parallel auf einer Testseite.
Redaktionelles Fazit
Carbon Components Angular passt für Angular-Teams ab Version 14, die IBM-nahe oder konservativ gestylte Enterprise-Oberflächen bauen und ein gepflegtes Komponentensystem statt eigener Widgets wollen. Es passt nicht für Projekte auf Angular 6 bis 13, die auf aktiven Support angewiesen sind, denn diese Versionen laufen nur noch über Community-Support der Reihe v3 und v4. Vor der Übernahme sollte man mit npx @angular/cli new my-project --style=scss ein Testprojekt aufsetzen, die Konfiguration in src/styles.scss mit $use-flexbox-grid und $font-path durchspielen und im Support-Matrix-Abschnitt des READMEs den Stand der eigenen Angular-Version gegen v5 oder den RC-Zweig v6.0.0-rc.24 prüfen.
Community-Notizen