Enterprise-UI-Plattform

TCM Design System

Ein umfassendes, barrierefreies, tokenbasiertes Designsystem für Enterprise-Produkte, komplexe Formulare, Workflows für Rich Media und datenintensive Anwendungen.

Tokens erkunden Playground öffnen

15Spezifikationsbereiche

120+Komponenten & Muster

AAWCAG-Ziel

Standardmäßig barrierefrei

Tastaturorientierte Steuerung, sichtbarer Fokus, ARIA-Zustände, Live-Regionen, Unterstützung für reduzierte Bewegung und Hochkontrastmodi.

Komponierbare Architektur

Tokens, Komponenten, Formularzustand und Verhaltenslogik sind getrennt, sodass Teams React, Vue, Angular oder Web Components integrieren können.

Enterprise-Umfang

Muster decken dichte Datenraster, adaptive Formulare, Dateimanager, Medienvorschauen und Entwickler-Tools ab.

Abdeckungsübersicht

Matrix der Spezifikationsimplementierung

Grundlage

Design-Tokens & Theming

Alle visuellen Entscheidungen werden von CSS-Variablen gesteuert, die zur Laufzeit ohne Neuladen der Seite umgeschaltet werden können.

Designmodus-Umschalter zur Laufzeit

Wählen Sie System, Hell, Dunkel, benutzerdefinierte Marke oder hohen Kontrast. Einstellungen werden, sofern verfügbar, mit der Miniapps Storage-API gespeichert.

Primärfarbe Radius-Skala Dichte

Live-Token-Vorschau

Primary Secondary Healthy Warning

:root {
  --tcm-color-primary: ...;
  --tcm-radius-md: ...;
}

Token-Kategorien

Farben, Typografie, Abstände, Ebenen, Deckkraft, Verläufe, Z-Index, Bewegung und Breakpoints.

Steuerelemente

Zentrale Eingabesteuerelemente

Validierte, maskierte, medientaugliche und editorartige Eingabefelder für Enterprise-Formular-Builder.

Standard-, numerische und maskierte Felder

Textfeld Email Passwort Telefonnummer Währung Prozentsatz Textbereich

Rich-Text-, Markdown- und Code-Editor

Bold List Code

<tcm-input required validation="email" />

Datei- und Bild-Upload

Dateien hier ablegenBilder, PDF, Audio, Video bis zu 50 MB

Farbauswahl

Pipette verwenden

Unterschriftenfeld

LöschenUnterschrift speichern

Datum, Uhrzeit und Lokalisierung

DateTimeDateTime

Bereich, Deckkraft und Schieberegler

Size Opacity

Preview

Tags, Chips und Mehrfachauswahl

Auswahlmuster

Auswahlelemente

Einfache, mehrfache, hierarchische, geografische, visuelle und Assistenten-ähnliche Auswahlsteuerelemente.

Checkbox, radio, toggles

Include audit logs Require approval Enterprise BusinessFeature flag

Selectors

CountryLanguageTime zone

Icon, font, shape, pattern

InterSerifMono

Tree view

▾ Design Tokens
- Colors
- Typography
- Motion
▾ Components
- Inputs
- Data Grid
- Overlays

Stepper

Account
Permissions
Review

Tabs and accordion

UsageAPIA11Y

Advanced options

Expandable panels support keyboard access and nested content.

Struktur

Navigation & Struktur

Responsives Seitenmenü, obere Navigationsleiste, Drawer, Menüs, Breadcrumbs, Seitennummerierung, Bottom Sheets und haftende Bereiche.

Breadcrumbs and pagination

Previous123Next

Menus and context actions

Open context menu

RenameDuplicateDelete

Sticky header/footer and bottom sheet

Sticky product header

Scrollable container content with persistent actions.

Panels and drawers adapt to viewport size.

Open bottom sheet

Architektur

Formulararchitektur

Reaktive und dynamische Formulare mit Gruppen, Arrays, verschachtelten Steuerelementen, Abhängigkeiten, asynchroner Validierung und adaptiven Layouts.

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

Interaktion

Schaltflächen & Aktionen

Standardaktionen, Senden/ZURÜCKSETZEN, Symbolschaltflächen, Hyperlinks, Laden, deaktiviert, gedrückt, Aktionsgruppen und FAB-Speed-Dial.

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

Status

Feedback & Indikatoren

Fortschritt, Spinner, Skeletons, Toast, Snackbar, Warnmeldungen, Benachrichtigungen, Badges, Modale, Popover und Tooltips.

Alerts and notifications

Scheduled maintenance Sunday 02:00 UTC.

Storage quota is above 95%.

Database connection failed. Retrying.

Trigger toast

Progress and loading

Open accessible modal

Unternehmensdaten

Anzeige- & Datensteuerungen

Tabellen, Raster, Inline-Bearbeitung, Sortierung, Filterung, Lazy Loading, Karten, Listen, Seitennummerierung, Karussell, Galerie und Medienplayer.

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

Assets

Erweiterte Medien- & Dateifunktionen

Dateimanager, Ordnernavigation, Drag-and-Drop-Sortierung, Bild-/Audio-/Video-/PDF-Vorschau, Komprimierung und Konvertierungs-Workflows.

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
Publish

Komposition

Layout & Container

Flex, Grid, einklappbare Panels, Karussells, responsive Spalten, Auto-Layouts, haftende Elemente und Überlauf-Steuerelemente.

Responsive auto-layout playground

Flex area

Grid area

Sticky area

Overflow area

Collapsible panel

Panels use semantic disclosure patterns and retain keyboard accessibility.

Overflow controls

Wide content inside a contained scroll region with clear affordances.

Einstellungen

Hilfsprogramme & Einstellungen

Geolokalisierung, Karten, QR-/Barcode-Scanner, Wetter-Widgets, Designmodus-Umschalter, Steuerungen für Schriftart/Hintergrund/Rand/Schatten und adaptive Farbmodi.

Geolocation and weather

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

Laufzeitmodell

Formulare — Ereignis- & Zustandsverwaltung

Lebenszyklus-Hooks, Validierungsereignisse, Abhängigkeiten, asynchrone Datenbindung, Rückgängig/Wiederherstellen, automatisches Speichern, Wiederherstellung, Zustandsverfolgung und Animationen.

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

A11Y

Barrierefreiheit & Nutzbarkeit

WCAG-2.1-AA-Praktiken für Tastatur, Screenreader, Kontrast, Fokusindikatoren, reduzierte Bewegung und geräteübergreifende Nutzbarkeit.

Checklist

Live region

Announce status

Contrast AA7.8:1

Adaptiv

Responsives & adaptives Design

Mobile-first-Layouts, adaptive Breakpoints, Touch-Ziele, wischbare Tabs, tastaturfreundliche Overlays und responsive Dichte.

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

Developer Experience

TypeScript-Unterstützung, Framework-Integrationen, Storybook-Spielwiesen, Token-Export, Theming-APIs, modulare Importe, CLI-Gerüste und Benennungskonventionen.

TypeScript component API

import { Button, ThemeProvider } from '@tcm/design-system';

<ThemeProvider mode="system" tokens={customTokens}>
  <Button variant="primary" loading={saving}>Save</Button>
</ThemeProvider>

CLI and token export

npx tcm-ui generate component data-grid
npx tcm-ui tokens export --format figma
npx tcm-ui storybook start