# mittwald Flow > Flow is the design system of mittwald. It provides accessible, brand-aligned React components, design tokens and patterns for building consistent mStudio user interfaces. This documentation is written in German. The React components are published as `@mittwald/flow-react-components`. Source code and issues live at https://github.com/mittwald/flow. For machine-readable Markdown, fetch [https://flow.mittwald.de/llms-full.txt](https://flow.mittwald.de/llms-full.txt) for the full documentation, or get a single page by prefixing its path with `/raw/` and appending `.md` (e.g. https://flow.mittwald.de/raw/components/actions/button.md). A JSON manifest of all pages is at https://flow.mittwald.de/llms.json. ## Get Started - [Installation](https://flow.mittwald.de/get-started/installation): Willkommen in der Flow Dokumentation! - [Stylesheet](https://flow.mittwald.de/get-started/stylesheet) - [Versionierung & Stabilität](https://flow.mittwald.de/get-started/versioning): Flow folgt Semantic Versioning. Diese Seite beschreibt, worauf du dich als Entwickler verlassen kannst, worauf nicht und wie du dich gegen ungewollte Änderungen absicherst. - [Upgrades](https://flow.mittwald.de/get-started/upgrades): Wie du eine neue Flow-Version einspielst – der Migrationsleitfaden für Breaking Changes, die Codemod-CLI und was direkt nach einem Release zu beachten ist. ## Releases - [Releases](https://flow.mittwald.de/releases/): Überblick über die veröffentlichten Flow-Releases, ihre Highlights und die enthaltenen Fixes. ## Foundations - [Design Tokens](https://flow.mittwald.de/foundations/design/design-tokens) - [Color](https://flow.mittwald.de/foundations/design/colors) - [Themes](https://flow.mittwald.de/foundations/design/themes) - [Accessibility](https://flow.mittwald.de/foundations/design/accessibility) - [Typography](https://flow.mittwald.de/foundations/design/typography) - [Layout](https://flow.mittwald.de/foundations/structure/layout) - [Spacing](https://flow.mittwald.de/foundations/structure/spacing) - [Components](https://flow.mittwald.de/foundations/structure/components) - [Sprach-Guide](https://flow.mittwald.de/foundations/content-guidelines/sprach-guide) - [Informationskonzept](https://flow.mittwald.de/foundations/content-guidelines/informationskonzept) - [Fehlermeldungen](https://flow.mittwald.de/foundations/content-guidelines/fehlermeldungen) ## Patterns - [Anlegen und Bearbeiten](https://flow.mittwald.de/patterns/patterns/anlegeprozess) - [Dashboard](https://flow.mittwald.de/patterns/patterns/dashboard) - [Detailseite](https://flow.mittwald.de/patterns/patterns/detail-page) - [Error Handling](https://flow.mittwald.de/patterns/patterns/errorhandling) - [Forms](https://flow.mittwald.de/patterns/patterns/forms) - [Listen, Raster und Tabellen](https://flow.mittwald.de/patterns/patterns/list-tile-table) - [Navigation](https://flow.mittwald.de/patterns/patterns/navigation) - [Multi Upload](https://flow.mittwald.de/patterns/codesnippets/multi-upload) - [Zeitintervalle](https://flow.mittwald.de/patterns/codesnippets/zeitintervalle) ## Components - [ActionGroup](https://flow.mittwald.de/components/actions/action-group): Die ActionGroup gruppiert zusammengehörige Actions. - [Action](https://flow.mittwald.de/components/actions/action): Die Action umschließt einen Button und gibt visuelles Feedback bei asynchronen Aktionen. - [Button](https://flow.mittwald.de/components/actions/button): Buttons werden verwendet, um Aktionen auf einer Seite oder in einem Formular auszulösen. - [ContextMenu](https://flow.mittwald.de/components/actions/context-menu): Das ContextMenu öffnet ein Popover mit Aktionen oder Links, meist über einen Button. - [CopyButton](https://flow.mittwald.de/components/actions/copy-button): Mit dem CopyButton können Informationen mit einem Klick in die Zwischenablage kopiert werden. - [Chat](https://flow.mittwald.de/components/chat/chat): Der Chat kombiniert den MessageThread mit einer Texteingabe. - [MessageThread](https://flow.mittwald.de/components/chat/message-thread): Der MessageThread gruppiert Messages zu einem Gesprächsverlauf. - [Message](https://flow.mittwald.de/components/chat/message): Eine Message stellt Nachrichten mit Autor-Informationen, Datum und Aktionen übersichtlich dar. - [AvatarStack](https://flow.mittwald.de/components/content/avatar-stack): Ein AvatarStack zeigt mehrere Avatare in einer horizontalen Gruppierung. - [Avatar](https://flow.mittwald.de/components/content/avatar): Ein Avatar repräsentiert User visuell, per Image, Initials oder Icon. - [CodeBlock](https://flow.mittwald.de/components/content/code-block): Der CodeBlock dient der übersichtlichen Darstellung von Code als Block mit Syntax-Highlighting. - [Color](https://flow.mittwald.de/components/content/color): Mit der Color-Component lassen sich Texte, Headings oder Icons gezielt einfärben. - [Heading](https://flow.mittwald.de/components/content/heading): Headings strukturieren den Inhalt einer Seite in Wichtigkeitsstufen. - [Icon](https://flow.mittwald.de/components/content/icon): Icons sind semantische Symbole, die Inhalte und Funktionen visualisieren. - [IllustratedMessage](https://flow.mittwald.de/components/content/illustrated-message): Die IllustratedMessage gibt großflächigen Bereichen mit wenig Inhalt eine visuelle Struktur. - [Image](https://flow.mittwald.de/components/content/image): Mit der Image-Component lassen sich Bilder in der Benutzeroberfläche einbinden. - [InlineCode](https://flow.mittwald.de/components/content/inline-code): InlineCode hebt Code-Beispiele innerhalb eines Fließtextes hervor. - [Kbd](https://flow.mittwald.de/components/content/kbd): Kbd stellt Tastaturkürzel dar und passt sich dem Betriebssystem an. - [Label](https://flow.mittwald.de/components/content/label): Ein Label erläutert Eingabeanforderungen in Formularen. - [LabeledValue](https://flow.mittwald.de/components/content/labeled-value): Das LabeledValue zeigt eine statische Information mit beschreibendem Label. - [Markdown](https://flow.mittwald.de/components/content/markdown): Die Markdown Component rendert Texteingaben im Markdown-Format. - [SkeletonText](https://flow.mittwald.de/components/content/skeleton-text): Der SkeletonText zeigt eine vereinfachte Vorschau einer Textzeile, bis der Content geladen ist. - [Skeleton](https://flow.mittwald.de/components/content/skeleton): Das Skeleton zeigt eine vereinfachte Vorschau, bis der Content geladen ist. - [Text](https://flow.mittwald.de/components/content/text): Die Text-Component sorgt für eine konsistente Formatierung und Strukturierung von Text. - [Truncate](https://flow.mittwald.de/components/content/truncate): Truncate kürzt zu lange Texte automatisch mit "…" ab. - [BigNumber](https://flow.mittwald.de/components/data-visualisation/big-number): Die BigNumber stellt Kennzahlen und Metriken prominent dar. - [CartesianChart](https://flow.mittwald.de/components/data-visualisation/cartesian-chart): Das CartesianChart stellt Metriken über Zeit als Liniendiagramm oder Flächendiagramm dar. - [DonutChart](https://flow.mittwald.de/components/data-visualisation/donut-chart): Das DonutChart stellt Verteilungen und Anteile als Ring dar. - [Autocomplete](https://flow.mittwald.de/components/form-controls/autocomplete): Autocomplete ergänzt eine Texteingabe um kontextbezogene Vorschläge. - [CheckboxButton](https://flow.mittwald.de/components/form-controls/checkbox-button): Der CheckboxButton ist eine auffälligere Variante der Checkbox. - [CheckboxGroup](https://flow.mittwald.de/components/form-controls/checkbox-group): Die CheckboxGroup fasst mehrere Checkboxen oder CheckboxButtons zusammen. - [Checkbox](https://flow.mittwald.de/components/form-controls/checkbox): Eine Checkbox stellt eine Option dar, die aus- oder abgewählt werden kann. - [CodeEditor](https://flow.mittwald.de/components/form-controls/code-editor): Der CodeEditor dient dem Bearbeiten von Code, mit Syntax-Highlighting. - [ComboBox](https://flow.mittwald.de/components/form-controls/combo-box): Die ComboBox kombiniert eine Texteingabe mit einem filterbaren Auswahlmenü. - [DatePicker](https://flow.mittwald.de/components/form-controls/date-picker): Der DatePicker erlaubt die Eingabe eines Datums per Tastatur oder Kalender. - [DateRangePicker](https://flow.mittwald.de/components/form-controls/date-range-picker): Der DateRangePicker erlaubt die Eingabe einer Zeitspanne per Tastatur oder Kalender. - [FileField](https://flow.mittwald.de/components/form-controls/file-field): Das FileField stellt eine kompakte Lösung dar, um Uploads von Dateien zu ermöglichen. - [MarkdownEditor](https://flow.mittwald.de/components/form-controls/markdown-editor): Der MarkdownEditor formatiert Text per Markdown-Syntax und bietet eine Vorschau. - [NumberField](https://flow.mittwald.de/components/form-controls/number-field): Das NumberField erlaubt die Eingabe und schrittweise Anpassung von Zahlen. - [PasswordCreationField](https://flow.mittwald.de/components/form-controls/password-creation-field): Das PasswordCreationField zeigt beim Erstellen eines Passworts dessen Komplexität. - [RadioGroup](https://flow.mittwald.de/components/form-controls/radio-group): Eine RadioGroup ermöglicht die Auswahl genau einer Option aus einer Gruppe. - [Rating](https://flow.mittwald.de/components/form-controls/rating): Die Rating Component ermöglicht die Eingabe und Darstellung einer Bewertung — standardmäßig mit fünf Sternen. - [SearchField](https://flow.mittwald.de/components/form-controls/search-field): Mit einem SearchField wird gezielt nach Inhalten in einer Anwendung gesucht. - [SegmentedControl](https://flow.mittwald.de/components/form-controls/segmented-control): Ein SegmentedControl bietet eine Einfachauswahl aus 2 bis 5 kurzen Optionen. - [Select](https://flow.mittwald.de/components/form-controls/select): Ein Select ermöglicht es Usern, eine einzelne Option aus einer vordefinierten Liste auszuwählen. - [Slider](https://flow.mittwald.de/components/form-controls/slider): Slider ermöglichen die Auswahl von Zahlenwerten innerhalb eines definierten Wertebereichs. - [Switch](https://flow.mittwald.de/components/form-controls/switch): Ein Switch schaltet eine Option unmittelbar ein oder aus. - [TextArea](https://flow.mittwald.de/components/form-controls/text-area): Die TextArea ermöglicht es dem User, längere Texte über mehrere Zeilen hinweg einzugeben. - [TextField](https://flow.mittwald.de/components/form-controls/text-field): Ein TextField ermöglicht die Texteingabe über die Tastatur. - [TimeField](https://flow.mittwald.de/components/form-controls/time-field): Mit dem TimeField können User eine konkrete Uhrzeit angeben. - [ListItemView](https://flow.mittwald.de/components/list/list-item-view): List.ItemView ist die vorgefertigte Layout-Lösung für ein List-Item. - [List](https://flow.mittwald.de/components/list/list): Die List stellt mehrere List-Items dar und bietet Sortierung, Filter und Suche. - [Breadcrumb](https://flow.mittwald.de/components/navigation/breadcrumb): Eine Breadcrumb zeigt die aktuelle Position sowie übergeordnete Navigationsebenen an. - [HeaderNavigation](https://flow.mittwald.de/components/navigation/header-navigation): Die HeaderNavigation ist eine horizontale Navigationsleiste am Seitenanfang. - [Link](https://flow.mittwald.de/components/navigation/link): Ein Link navigiert zu einer anderen Seite, einem Anker oder startet Downloads. - [Navigation](https://flow.mittwald.de/components/navigation/navigation): Die Navigation dient der Orientierung und führt zu den Unterseiten einer Anwendung. - [TabNavigation](https://flow.mittwald.de/components/navigation/tab-navigation): Die TabNavigation ermöglicht die Navigation zwischen verschiedenen Seiten innerhalb eines zusammengehörigen Bereichs. - [ContextualHelp](https://flow.mittwald.de/components/overlays/contextual-help): Ein ContextualHelp bietet dem User weiterführende, hilfreiche Informationen in einem Popover an. - [LightBox](https://flow.mittwald.de/components/overlays/light-box): Eine LightBox zeigt Bilder vergrößert als Overlay mit abgedunkeltem Hintergrund. - [Modal](https://flow.mittwald.de/components/overlays/modal): Ein Modal zeigt Inhalte zentriert als Overlay über der Hauptseite. - [Tooltip](https://flow.mittwald.de/components/overlays/tooltip): Tooltips zeigen beim Hovern kurze Zusatzinformationen zu einem Element. - [Field](https://flow.mittwald.de/components/react-hook-form/field): Die Field-Component integriert Flows Form Controls in React Hook Form. - [FormRootError](https://flow.mittwald.de/components/react-hook-form/form-root-error): Die FormRootError-Component zeigt Fehler auf Form-Ebene an. - [Form](https://flow.mittwald.de/components/react-hook-form/form): Die Form-Component gruppiert Formularfelder, nutzbar nur mit React Hook Form. - [SubmitButton](https://flow.mittwald.de/components/react-hook-form/submit-button): Der SubmitButton dient in Verbindung mit React Hook Form zum Absenden von Formularen. - [AlertBadge](https://flow.mittwald.de/components/status/alert-badge): Ein AlertBadge hebt Statusmeldungen hervor, die besondere Aufmerksamkeit erfordern. - [AlertText](https://flow.mittwald.de/components/status/alert-text): AlertText informiert über das Ergebnis einer Aktion, nah an der auslösenden Stelle. - [Alert](https://flow.mittwald.de/components/status/alert): Ein Alert macht den User visuell hervorgehoben auf wichtige, nicht ignorierbare Informationen aufmerksam. - [Badge](https://flow.mittwald.de/components/status/badge): Ein Badge stellt kompakt zusätzliche Informationen wie Metadaten, Status oder Kategorien dar. - [CounterBadge](https://flow.mittwald.de/components/status/counter-badge): Ein CounterBadge weist kompakt auf neue oder ungelesene Inhalte hin. - [LoadingSpinner](https://flow.mittwald.de/components/status/loading-spinner): Der LoadingSpinner signalisiert, dass Inhalte im Hintergrund geladen werden. - [NotificationProvider](https://flow.mittwald.de/components/status/notification-provider): Der NotificationProvider dient zur Anzeige und Steuerung von Notifications. - [Notification](https://flow.mittwald.de/components/status/notification): Die Notification informiert User über wichtige System- oder Statusmeldungen. - [ProgressBar](https://flow.mittwald.de/components/status/progress-bar): Eine ProgressBar zeigt den Fortschritt eines laufenden Prozesses als horizontalen Balken an. - [AccentBox](https://flow.mittwald.de/components/structure/accent-box): Die AccentBox dient dazu, besondere Inhalte dekorativ hervorzuheben. - [Accordion](https://flow.mittwald.de/components/structure/accordion): Das Accordion blendet Content-Bereiche ein und aus und spart so Platz. - [Align](https://flow.mittwald.de/components/structure/align): Align ordnet bekannte Kombinationen von Components korrekt zueinander an. - [ColumnLayout](https://flow.mittwald.de/components/structure/column-layout): Das ColumnLayout organisiert Inhalte in Spalten, definierbar je Breakpoint. - [Combine](https://flow.mittwald.de/components/structure/combine): Combine ordnet bekannte Kombinationen von Components korrekt zueinander an. - [Flex](https://flow.mittwald.de/components/structure/flex): Flex ordnet Components CSS-Flexbox-basiert in einem Flex-Container an. - [LayoutCard](https://flow.mittwald.de/components/structure/layout-card): Eine LayoutCard ist ein einfacher Container, der mit beliebigem Inhalt gefüllt werden kann. - [Section](https://flow.mittwald.de/components/structure/section): Eine Section gliedert Content in Teilbereiche und trennt sie durch einen Separator. - [Separator](https://flow.mittwald.de/components/structure/separator): Ein Separator ist eine Linie, die inhaltliche Abschnitte voneinander abgrenzt. - [Table](https://flow.mittwald.de/components/structure/table): Die Table zeigt Daten in Zeilen und Spalten und macht Einträge vergleichbar. - [Tabs](https://flow.mittwald.de/components/structure/tabs): Tabs strukturieren verwandte Inhalte in schnell erreichbaren Ansichten. - [FileCardList](https://flow.mittwald.de/components/upload/file-card-list): Die FileCardList platziert mehrere FileCards in einem ColumnLayout. - [FileCard](https://flow.mittwald.de/components/upload/file-card): Die FileCard visualisiert Dateien samt relevanter Informationen. - [FileDropZone](https://flow.mittwald.de/components/upload/file-drop-zone): Die FileDropZone ermöglicht das Hochladen von Dateien per Drag-and-Drop oder durch manuelle Auswahl. - [ImageCropper](https://flow.mittwald.de/components/upload/image-cropper): Der ImageCropper schneidet ein Bild auf ein bestimmtes Format zu.