{"name":"mittwald Flow","description":"Design system of mittwald: accessible, brand-aligned React components, design tokens and patterns. Documentation is written in German.","package":"@mittwald/flow-react-components","remotePackage":"@mittwald/flow-remote-react-components","repository":"https://github.com/mittwald/flow","llmsTxt":"https://flow.mittwald.de/llms.txt","llmsFullTxt":"https://flow.mittwald.de/llms-full.txt","pageCount":121,"pages":[{"title":"Installation","description":"Willkommen in der Flow Dokumentation!","url":"https://flow.mittwald.de/get-started/installation","markdown":"https://flow.mittwald.de/raw/get-started/installation.md"},{"title":"Stylesheet","url":"https://flow.mittwald.de/get-started/stylesheet","markdown":"https://flow.mittwald.de/raw/get-started/stylesheet.md"},{"title":"Versionierung & Stabilität","description":"Flow folgt Semantic Versioning. Diese Seite beschreibt, worauf du dich als Entwickler verlassen kannst, worauf nicht und wie du dich gegen ungewollte Änderungen absicherst.","url":"https://flow.mittwald.de/get-started/versioning","markdown":"https://flow.mittwald.de/raw/get-started/versioning.md"},{"title":"Upgrades","description":"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.","url":"https://flow.mittwald.de/get-started/upgrades","markdown":"https://flow.mittwald.de/raw/get-started/upgrades.md"},{"title":"Releases","description":"Überblick über die veröffentlichten Flow-Releases, ihre Highlights und die enthaltenen Fixes.","url":"https://flow.mittwald.de/releases","markdown":"https://flow.mittwald.de/raw/releases.md"},{"title":"Design Tokens","url":"https://flow.mittwald.de/foundations/design/design-tokens","markdown":"https://flow.mittwald.de/raw/foundations/design/design-tokens.md"},{"title":"Color","url":"https://flow.mittwald.de/foundations/design/colors","markdown":"https://flow.mittwald.de/raw/foundations/design/colors.md"},{"title":"Themes","url":"https://flow.mittwald.de/foundations/design/themes","markdown":"https://flow.mittwald.de/raw/foundations/design/themes.md"},{"title":"Accessibility","url":"https://flow.mittwald.de/foundations/design/accessibility","markdown":"https://flow.mittwald.de/raw/foundations/design/accessibility.md"},{"title":"Typography","url":"https://flow.mittwald.de/foundations/design/typography","markdown":"https://flow.mittwald.de/raw/foundations/design/typography.md"},{"title":"Layout","url":"https://flow.mittwald.de/foundations/structure/layout","markdown":"https://flow.mittwald.de/raw/foundations/structure/layout.md"},{"title":"Spacing","url":"https://flow.mittwald.de/foundations/structure/spacing","markdown":"https://flow.mittwald.de/raw/foundations/structure/spacing.md"},{"title":"Components","url":"https://flow.mittwald.de/foundations/structure/components","markdown":"https://flow.mittwald.de/raw/foundations/structure/components.md"},{"title":"Navigation","url":"https://flow.mittwald.de/foundations/structure/navigation","markdown":"https://flow.mittwald.de/raw/foundations/structure/navigation.md"},{"title":"Sprach-Guide","url":"https://flow.mittwald.de/foundations/content-guidelines/sprach-guide","markdown":"https://flow.mittwald.de/raw/foundations/content-guidelines/sprach-guide.md"},{"title":"Informationskonzept","url":"https://flow.mittwald.de/foundations/content-guidelines/informationskonzept","markdown":"https://flow.mittwald.de/raw/foundations/content-guidelines/informationskonzept.md"},{"title":"Fehlermeldungen","url":"https://flow.mittwald.de/foundations/content-guidelines/fehlermeldungen","markdown":"https://flow.mittwald.de/raw/foundations/content-guidelines/fehlermeldungen.md"},{"title":"Error Handling","url":"https://flow.mittwald.de/foundations/content-guidelines/error-handling","markdown":"https://flow.mittwald.de/raw/foundations/content-guidelines/error-handling.md"},{"title":"Focus Task","description":"Eine einzelne Seite ohne Navigation, damit sich Nutzer auf eine bestimmte Aufgabe konzentrieren können.","url":"https://flow.mittwald.de/templates/app-shells/focus-task","markdown":"https://flow.mittwald.de/raw/templates/app-shells/focus-task.md"},{"title":"Simple App","description":"Eine App mit flacher Navigation über wenige gleichrangige Bereiche.","url":"https://flow.mittwald.de/templates/app-shells/simple-app","markdown":"https://flow.mittwald.de/raw/templates/app-shells/simple-app.md"},{"title":"Complex App","description":"Eine App mit mehreren Navigationsebenen aus globalem Header, Sidebar und Breadcrumb.","url":"https://flow.mittwald.de/templates/app-shells/complex-app","markdown":"https://flow.mittwald.de/raw/templates/app-shells/complex-app.md"},{"title":"Detailseite","description":"Die zentrale Seite für ein einzelnes Objekt und der Ausgangspunkt für dessen Bearbeitung.","url":"https://flow.mittwald.de/templates/seiten/detailseite","markdown":"https://flow.mittwald.de/raw/templates/seiten/detailseite.md"},{"title":"Dashboard","description":"Die Überblicksseite eines Bereichs, die Kennzahlen, Status und Einstiege in Kacheln bündelt und die Lage auf einen Blick erfassbar macht.","url":"https://flow.mittwald.de/templates/seiten/dashboard","markdown":"https://flow.mittwald.de/raw/templates/seiten/dashboard.md"},{"title":"Übersichtsseite","description":"Die durchsuchbare Liste gleichartiger Objekte und der Einstieg in ihre einzelnen Detailseiten.","url":"https://flow.mittwald.de/templates/seiten/uebersichtsseite","markdown":"https://flow.mittwald.de/raw/templates/seiten/uebersichtsseite.md"},{"title":"Anlegen & Bearbeiten","description":"Ein Modal mit Formular über der auslösenden Seite, mit dem ein Objekt angelegt oder bearbeitet wird.","url":"https://flow.mittwald.de/templates/overlays/anlegen-bearbeiten","markdown":"https://flow.mittwald.de/raw/templates/overlays/anlegen-bearbeiten.md"},{"title":"Bestätigen","description":"Ein Overlay, das vor einer folgenreichen Aktion über ihre Auswirkungen informiert und eine Entscheidung einholt.","url":"https://flow.mittwald.de/templates/overlays/bestaetigen","markdown":"https://flow.mittwald.de/raw/templates/overlays/bestaetigen.md"},{"title":"Anzeigen","description":"Ein Overlay, das Inhalte zu einem Objekt zeigt, ohne dass daraus eine Aktion folgt.","url":"https://flow.mittwald.de/templates/overlays/anzeigen","markdown":"https://flow.mittwald.de/raw/templates/overlays/anzeigen.md"},{"title":"Mehrere Schritte","description":"Ein Overlay, das die Eingabe auf mehrere Schritte verteilt, weil eine Auswahl bestimmt, welche Felder danach folgen.","url":"https://flow.mittwald.de/templates/overlays/mehrere-schritte","markdown":"https://flow.mittwald.de/raw/templates/overlays/mehrere-schritte.md"},{"title":"Formular","description":"Die Komposition aus Formularfeldern, Struktur und Absenden-Aktion, mit der eine zusammengehörige Dateneingabe erfasst wird.","url":"https://flow.mittwald.de/templates/bausteine/formular","markdown":"https://flow.mittwald.de/raw/templates/bausteine/formular.md"},{"title":"Multi-Upload","description":"Die Kombination aus Auswahlfeld und Dateiliste, die mehrere Dateien bis zum Absenden zwischenspeichert, sodass Nutzer sie sammeln, prüfen und einzeln entfernen können.","url":"https://flow.mittwald.de/templates/bausteine/multi-upload","markdown":"https://flow.mittwald.de/raw/templates/bausteine/multi-upload.md"},{"title":"Zeitintervalle","description":"Die Kombination aus Auswahl und dynamisch ergänzten Feldern, mit der Nutzer ein Zeitintervall für wiederkehrende Aktionen wie einen Cronjob festlegen.","url":"https://flow.mittwald.de/templates/bausteine/zeitintervalle","markdown":"https://flow.mittwald.de/raw/templates/bausteine/zeitintervalle.md"},{"title":"Action","description":"Die Action umschließt einen Button und gibt visuelles Feedback bei asynchronen Aktionen.","url":"https://flow.mittwald.de/components/actions/action","markdown":"https://flow.mittwald.de/raw/components/actions/action.md","component":"Action","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"ActionGroup","description":"Die ActionGroup gruppiert zusammengehörige Actions.","url":"https://flow.mittwald.de/components/actions/action-group","markdown":"https://flow.mittwald.de/raw/components/actions/action-group.md","component":"ActionGroup","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Button","description":"Buttons werden verwendet, um Aktionen auf einer Seite oder in einem Formular auszulösen.","url":"https://flow.mittwald.de/components/actions/button","markdown":"https://flow.mittwald.de/raw/components/actions/button.md","component":"Button","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"ContextMenu","description":"Das ContextMenu öffnet ein Popover mit Aktionen oder Links, meist über einen Button.","url":"https://flow.mittwald.de/components/actions/context-menu","markdown":"https://flow.mittwald.de/raw/components/actions/context-menu.md","component":"ContextMenu","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["controller","render","renderEmptyState","style","wrapWith"]}},{"title":"CopyButton","description":"Mit dem CopyButton können Informationen mit einem Klick in die Zwischenablage kopiert werden.","url":"https://flow.mittwald.de/components/actions/copy-button","markdown":"https://flow.mittwald.de/raw/components/actions/copy-button.md","component":"CopyButton","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["style","wrapWith"]}},{"title":"Chat","description":"Der Chat kombiniert den MessageThread mit einer Texteingabe.","url":"https://flow.mittwald.de/components/chat/chat","markdown":"https://flow.mittwald.de/raw/components/chat/chat.md","component":"Chat","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"Message","description":"Eine Message stellt Nachrichten mit Autor-Informationen, Datum und Aktionen übersichtlich dar.","url":"https://flow.mittwald.de/components/chat/message","markdown":"https://flow.mittwald.de/raw/components/chat/message.md","component":"Message","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"MessageThread","description":"Der MessageThread gruppiert Messages zu einem Gesprächsverlauf.","url":"https://flow.mittwald.de/components/chat/message-thread","markdown":"https://flow.mittwald.de/raw/components/chat/message-thread.md","component":"MessageThread","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Avatar","description":"Ein Avatar repräsentiert User visuell, per Image, Initials oder Icon.","url":"https://flow.mittwald.de/components/content/avatar","markdown":"https://flow.mittwald.de/raw/components/content/avatar.md","component":"Avatar","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"AvatarStack","description":"Ein AvatarStack zeigt mehrere Avatare in einer horizontalen Gruppierung.","url":"https://flow.mittwald.de/components/content/avatar-stack","markdown":"https://flow.mittwald.de/raw/components/content/avatar-stack.md","component":"AvatarStack","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"CodeBlock","description":"Der CodeBlock dient der übersichtlichen Darstellung von Code als Block mit Syntax-Highlighting.","url":"https://flow.mittwald.de/components/content/code-block","markdown":"https://flow.mittwald.de/raw/components/content/code-block.md","component":"CodeBlock","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"Color","description":"Mit der Color-Component lassen sich Texte, Headings oder Icons gezielt einfärben.","url":"https://flow.mittwald.de/components/content/color","markdown":"https://flow.mittwald.de/raw/components/content/color.md","component":"Color","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"Heading","description":"Headings strukturieren den Inhalt einer Seite in Wichtigkeitsstufen.","url":"https://flow.mittwald.de/components/content/heading","markdown":"https://flow.mittwald.de/raw/components/content/heading.md","component":"Heading","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","wrapWith"]}},{"title":"Icon","description":"Icons sind semantische Symbole, die Inhalte und Funktionen visualisieren.","url":"https://flow.mittwald.de/components/content/icon","markdown":"https://flow.mittwald.de/raw/components/content/icon.md","component":"Icon","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"IllustratedMessage","description":"Die IllustratedMessage gibt großflächigen Bereichen mit wenig Inhalt eine visuelle Struktur.","url":"https://flow.mittwald.de/components/content/illustrated-message","markdown":"https://flow.mittwald.de/raw/components/content/illustrated-message.md","component":"IllustratedMessage","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Image","description":"Mit der Image-Component lassen sich Bilder in der Benutzeroberfläche einbinden.","url":"https://flow.mittwald.de/components/content/image","markdown":"https://flow.mittwald.de/raw/components/content/image.md","component":"Image","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"InlineCode","description":"InlineCode hebt Code-Beispiele innerhalb eines Fließtextes hervor.","url":"https://flow.mittwald.de/components/content/inline-code","markdown":"https://flow.mittwald.de/raw/components/content/inline-code.md","component":"InlineCode","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"Kbd","description":"Kbd stellt Tastaturkürzel dar und passt sich dem Betriebssystem an.","url":"https://flow.mittwald.de/components/content/kbd","markdown":"https://flow.mittwald.de/raw/components/content/kbd.md","component":"Kbd","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Label","description":"Ein Label erläutert Eingabeanforderungen in Formularen.","url":"https://flow.mittwald.de/components/content/label","markdown":"https://flow.mittwald.de/raw/components/content/label.md","component":"Label","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","wrapWith"]}},{"title":"LabeledValue","description":"Das LabeledValue zeigt eine statische Information mit beschreibendem Label.","url":"https://flow.mittwald.de/components/content/labeled-value","markdown":"https://flow.mittwald.de/raw/components/content/labeled-value.md","component":"LabeledValue","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"Markdown","description":"Die Markdown Component rendert Texteingaben im Markdown-Format.","url":"https://flow.mittwald.de/components/content/markdown","markdown":"https://flow.mittwald.de/raw/components/content/markdown.md","component":"Markdown","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["components","ref"]}},{"title":"Skeleton","description":"Das Skeleton zeigt eine vereinfachte Vorschau, bis der Content geladen ist.","url":"https://flow.mittwald.de/components/content/skeleton","markdown":"https://flow.mittwald.de/raw/components/content/skeleton.md","component":"Skeleton","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"SkeletonText","description":"Der SkeletonText zeigt eine vereinfachte Vorschau einer Textzeile, bis der Content geladen ist.","url":"https://flow.mittwald.de/components/content/skeleton-text","markdown":"https://flow.mittwald.de/raw/components/content/skeleton-text.md","component":"SkeletonText","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"Text","description":"Die Text-Component sorgt für eine konsistente Formatierung und Strukturierung von Text.","url":"https://flow.mittwald.de/components/content/text","markdown":"https://flow.mittwald.de/raw/components/content/text.md","component":"Text","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","wrapWith"]}},{"title":"Truncate","description":"Truncate kürzt zu lange Texte automatisch mit \"…\" ab.","url":"https://flow.mittwald.de/components/content/truncate","markdown":"https://flow.mittwald.de/raw/components/content/truncate.md","component":"Truncate","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"BigNumber","description":"Die BigNumber stellt Kennzahlen und Metriken prominent dar.","url":"https://flow.mittwald.de/components/data-visualisation/big-number","markdown":"https://flow.mittwald.de/raw/components/data-visualisation/big-number.md","component":"BigNumber","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"CartesianChart","description":"Das CartesianChart stellt Metriken als Linien-, Flächen- oder Balkendiagramm dar.","url":"https://flow.mittwald.de/components/data-visualisation/cartesian-chart","markdown":"https://flow.mittwald.de/raw/components/data-visualisation/cartesian-chart.md","component":"CartesianChart","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"DonutChart","description":"Das DonutChart stellt Verteilungen und Anteile als Ring dar.","url":"https://flow.mittwald.de/components/data-visualisation/donut-chart","markdown":"https://flow.mittwald.de/raw/components/data-visualisation/donut-chart.md","component":"DonutChart","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style"]}},{"title":"Autocomplete","description":"Autocomplete ergänzt eine Texteingabe um kontextbezogene Vorschläge.","url":"https://flow.mittwald.de/components/form-controls/autocomplete","markdown":"https://flow.mittwald.de/raw/components/form-controls/autocomplete.md","component":"Autocomplete","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Checkbox","description":"Eine Checkbox stellt eine Option dar, die aus- oder abgewählt werden kann.","url":"https://flow.mittwald.de/components/form-controls/checkbox","markdown":"https://flow.mittwald.de/raw/components/form-controls/checkbox.md","component":"Checkbox","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"CheckboxButton","description":"Der CheckboxButton ist eine auffälligere Variante der Checkbox.","url":"https://flow.mittwald.de/components/form-controls/checkbox-button","markdown":"https://flow.mittwald.de/raw/components/form-controls/checkbox-button.md","component":"CheckboxButton","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"CheckboxGroup","description":"Die CheckboxGroup fasst mehrere Checkboxen oder CheckboxButtons zusammen.","url":"https://flow.mittwald.de/components/form-controls/checkbox-group","markdown":"https://flow.mittwald.de/raw/components/form-controls/checkbox-group.md","component":"CheckboxGroup","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"CodeEditor","description":"Der CodeEditor dient dem Bearbeiten von Code, mit Syntax-Highlighting.","url":"https://flow.mittwald.de/components/form-controls/code-editor","markdown":"https://flow.mittwald.de/raw/components/form-controls/code-editor.md","component":"CodeEditor","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"ComboBox","description":"Die ComboBox kombiniert eine Texteingabe mit einem filterbaren Auswahlmenü.","url":"https://flow.mittwald.de/components/form-controls/combo-box","markdown":"https://flow.mittwald.de/raw/components/form-controls/combo-box.md","component":"ComboBox","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","renderEmptyState","style","wrapWith"]}},{"title":"DatePicker","description":"Der DatePicker erlaubt die Eingabe eines Datums per Tastatur oder Kalender.","url":"https://flow.mittwald.de/components/form-controls/date-picker","markdown":"https://flow.mittwald.de/raw/components/form-controls/date-picker.md","component":"DatePicker","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"DateRangePicker","description":"Der DateRangePicker erlaubt die Eingabe einer Zeitspanne per Tastatur oder Kalender.","url":"https://flow.mittwald.de/components/form-controls/date-range-picker","markdown":"https://flow.mittwald.de/raw/components/form-controls/date-range-picker.md","component":"DateRangePicker","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"FileField","description":"Das FileField stellt eine kompakte Lösung dar, um Uploads von Dateien zu ermöglichen.","url":"https://flow.mittwald.de/components/form-controls/file-field","markdown":"https://flow.mittwald.de/raw/components/form-controls/file-field.md","component":"FileField","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"MarkdownEditor","description":"Der MarkdownEditor formatiert Text per Markdown-Syntax und bietet eine Vorschau.","url":"https://flow.mittwald.de/components/form-controls/markdown-editor","markdown":"https://flow.mittwald.de/raw/components/form-controls/markdown-editor.md","component":"MarkdownEditor","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"NumberField","description":"Das NumberField erlaubt die Eingabe und schrittweise Anpassung von Zahlen.","url":"https://flow.mittwald.de/components/form-controls/number-field","markdown":"https://flow.mittwald.de/raw/components/form-controls/number-field.md","component":"NumberField","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"PasswordCreationField","description":"Das PasswordCreationField zeigt beim Erstellen eines Passworts dessen Komplexität.","url":"https://flow.mittwald.de/components/form-controls/password-creation-field","markdown":"https://flow.mittwald.de/raw/components/form-controls/password-creation-field.md","component":"PasswordCreationField","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"RadioGroup","description":"Eine RadioGroup ermöglicht die Auswahl genau einer Option aus einer Gruppe.","url":"https://flow.mittwald.de/components/form-controls/radio-group","markdown":"https://flow.mittwald.de/raw/components/form-controls/radio-group.md","component":"RadioGroup","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"Rating","description":"Die Rating Component ermöglicht die Eingabe und Darstellung einer Bewertung — standardmäßig mit fünf Sternen.","url":"https://flow.mittwald.de/components/form-controls/rating","markdown":"https://flow.mittwald.de/raw/components/form-controls/rating.md","component":"Rating","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"SearchField","description":"Mit einem SearchField wird gezielt nach Inhalten in einer Anwendung gesucht.","url":"https://flow.mittwald.de/components/form-controls/search-field","markdown":"https://flow.mittwald.de/raw/components/form-controls/search-field.md","component":"SearchField","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"SegmentedControl","description":"Ein SegmentedControl bietet eine Einfachauswahl aus 2 bis 5 kurzen Optionen.","url":"https://flow.mittwald.de/components/form-controls/segmented-control","markdown":"https://flow.mittwald.de/raw/components/form-controls/segmented-control.md","component":"SegmentedControl","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"Select","description":"Ein Select ermöglicht es Usern, eine einzelne Option aus einer vordefinierten Liste auszuwählen.","url":"https://flow.mittwald.de/components/form-controls/select","markdown":"https://flow.mittwald.de/raw/components/form-controls/select.md","component":"Select","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"Slider","description":"Slider ermöglichen die Auswahl von Zahlenwerten innerhalb eines definierten Wertebereichs.","url":"https://flow.mittwald.de/components/form-controls/slider","markdown":"https://flow.mittwald.de/raw/components/form-controls/slider.md","component":"Slider","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"Switch","description":"Ein Switch schaltet eine Option unmittelbar ein oder aus.","url":"https://flow.mittwald.de/components/form-controls/switch","markdown":"https://flow.mittwald.de/raw/components/form-controls/switch.md","component":"Switch","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"TextArea","description":"Die TextArea ermöglicht es dem User, längere Texte über mehrere Zeilen hinweg einzugeben.","url":"https://flow.mittwald.de/components/form-controls/text-area","markdown":"https://flow.mittwald.de/raw/components/form-controls/text-area.md","component":"TextArea","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"TextField","description":"Ein TextField ermöglicht die Texteingabe über die Tastatur.","url":"https://flow.mittwald.de/components/form-controls/text-field","markdown":"https://flow.mittwald.de/raw/components/form-controls/text-field.md","component":"TextField","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"TimeField","description":"Mit dem TimeField können User eine konkrete Uhrzeit angeben.","url":"https://flow.mittwald.de/components/form-controls/time-field","markdown":"https://flow.mittwald.de/raw/components/form-controls/time-field.md","component":"TimeField","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"List","description":"Die List stellt mehrere List-Items dar und bietet Sortierung, Filter und Suche.","url":"https://flow.mittwald.de/components/list/list","markdown":"https://flow.mittwald.de/raw/components/list/list.md","component":"List","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"ListItemView","description":"List.ItemView ist die vorgefertigte Layout-Lösung für ein List-Item.","url":"https://flow.mittwald.de/components/list/list-item-view","markdown":"https://flow.mittwald.de/raw/components/list/list-item-view.md","component":"ListItemView","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"Breadcrumb","description":"Eine Breadcrumb zeigt die aktuelle Position sowie übergeordnete Navigationsebenen an.","url":"https://flow.mittwald.de/components/navigation/breadcrumb","markdown":"https://flow.mittwald.de/raw/components/navigation/breadcrumb.md","component":"Breadcrumb","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style"]}},{"title":"HeaderNavigation","description":"Die HeaderNavigation ist eine horizontale Navigationsleiste am Seitenanfang.","url":"https://flow.mittwald.de/components/navigation/header-navigation","markdown":"https://flow.mittwald.de/raw/components/navigation/header-navigation.md","component":"HeaderNavigation","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"Link","description":"Ein Link navigiert zu einer anderen Seite, einem Anker oder startet Downloads.","url":"https://flow.mittwald.de/components/navigation/link","markdown":"https://flow.mittwald.de/raw/components/navigation/link.md","component":"Link","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"Navigation","description":"Die Navigation dient der Orientierung und führt zu den Unterseiten einer Anwendung.","url":"https://flow.mittwald.de/components/navigation/navigation","markdown":"https://flow.mittwald.de/raw/components/navigation/navigation.md","component":"Navigation","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"TabNavigation","description":"Die TabNavigation ermöglicht die Navigation zwischen verschiedenen Seiten innerhalb eines zusammengehörigen Bereichs.","url":"https://flow.mittwald.de/components/navigation/tab-navigation","markdown":"https://flow.mittwald.de/raw/components/navigation/tab-navigation.md","component":"TabNavigation","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"CoachMark","description":"Ein CoachMark macht auf neue Features oder verschobene Bedienelemente aufmerksam.","url":"https://flow.mittwald.de/components/overlays/coach-mark","markdown":"https://flow.mittwald.de/raw/components/overlays/coach-mark.md","component":"CoachMark","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["anchorRef","controller","render","style","wrapWith"]}},{"title":"ContextualHelp","description":"Ein ContextualHelp bietet dem User weiterführende, hilfreiche Informationen in einem Popover an.","url":"https://flow.mittwald.de/components/overlays/contextual-help","markdown":"https://flow.mittwald.de/raw/components/overlays/contextual-help.md","component":"ContextualHelp","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["controller","render","style","wrapWith"]}},{"title":"LightBox","description":"Eine LightBox zeigt Bilder vergrößert als Overlay mit abgedunkeltem Hintergrund.","url":"https://flow.mittwald.de/components/overlays/light-box","markdown":"https://flow.mittwald.de/raw/components/overlays/light-box.md","component":"LightBox","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["controller","wrapWith"]}},{"title":"Modal","description":"Ein Modal zeigt Inhalte zentriert als Overlay über der Hauptseite.","url":"https://flow.mittwald.de/components/overlays/modal","markdown":"https://flow.mittwald.de/raw/components/overlays/modal.md","component":"Modal","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["controller","wrapWith"]}},{"title":"Tooltip","description":"Tooltips zeigen beim Hovern kurze Zusatzinformationen zu einem Element.","url":"https://flow.mittwald.de/components/overlays/tooltip","markdown":"https://flow.mittwald.de/raw/components/overlays/tooltip.md","component":"Tooltip","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style"]}},{"title":"Field","description":"Die Field-Component integriert Flows Form Controls in React Hook Form.","url":"https://flow.mittwald.de/components/react-hook-form/field","markdown":"https://flow.mittwald.de/raw/components/react-hook-form/field.md","component":"Field","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components/react-hook-form"}},{"title":"Form","description":"Die Form-Component gruppiert Formularfelder, nutzbar nur mit React Hook Form.","url":"https://flow.mittwald.de/components/react-hook-form/form","markdown":"https://flow.mittwald.de/raw/components/react-hook-form/form.md","component":"Form","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components/react-hook-form"}},{"title":"FormRootError","description":"Die FormRootError-Component zeigt Fehler auf Form-Ebene an.","url":"https://flow.mittwald.de/components/react-hook-form/form-root-error","markdown":"https://flow.mittwald.de/raw/components/react-hook-form/form-root-error.md","component":"FormRootError","remote":{"available":false}},{"title":"SubmitButton","description":"Der SubmitButton dient in Verbindung mit React Hook Form zum Absenden von Formularen.","url":"https://flow.mittwald.de/components/react-hook-form/submit-button","markdown":"https://flow.mittwald.de/raw/components/react-hook-form/submit-button.md","component":"SubmitButton","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components/react-hook-form","excludedProps":["render","style","wrapWith"]}},{"title":"Alert","description":"Ein Alert macht den User visuell hervorgehoben auf wichtige, nicht ignorierbare Informationen aufmerksam.","url":"https://flow.mittwald.de/components/status/alert","markdown":"https://flow.mittwald.de/raw/components/status/alert.md","component":"Alert","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"AlertBadge","description":"Ein AlertBadge hebt Statusmeldungen hervor, die besondere Aufmerksamkeit erfordern.","url":"https://flow.mittwald.de/components/status/alert-badge","markdown":"https://flow.mittwald.de/raw/components/status/alert-badge.md","component":"AlertBadge","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"AlertText","description":"AlertText informiert über das Ergebnis einer Aktion, nah an der auslösenden Stelle.","url":"https://flow.mittwald.de/components/status/alert-text","markdown":"https://flow.mittwald.de/raw/components/status/alert-text.md","component":"AlertText","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Badge","description":"Ein Badge stellt kompakt zusätzliche Informationen wie Metadaten, Status oder Kategorien dar.","url":"https://flow.mittwald.de/components/status/badge","markdown":"https://flow.mittwald.de/raw/components/status/badge.md","component":"Badge","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"CounterBadge","description":"Ein CounterBadge weist kompakt auf neue oder ungelesene Inhalte hin.","url":"https://flow.mittwald.de/components/status/counter-badge","markdown":"https://flow.mittwald.de/raw/components/status/counter-badge.md","component":"CounterBadge","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"LoadingSpinner","description":"Der LoadingSpinner signalisiert, dass Inhalte im Hintergrund geladen werden.","url":"https://flow.mittwald.de/components/status/loading-spinner","markdown":"https://flow.mittwald.de/raw/components/status/loading-spinner.md","component":"LoadingSpinner","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Notification","description":"Die Notification informiert User über wichtige System- oder Statusmeldungen.","url":"https://flow.mittwald.de/components/status/notification","markdown":"https://flow.mittwald.de/raw/components/status/notification.md","component":"Notification","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"NotificationProvider","description":"Der NotificationProvider dient zur Anzeige und Steuerung von Notifications.","url":"https://flow.mittwald.de/components/status/notification-provider","markdown":"https://flow.mittwald.de/raw/components/status/notification-provider.md","component":"NotificationProvider","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"ProgressBar","description":"Eine ProgressBar zeigt den Fortschritt eines laufenden Prozesses als horizontalen Balken an.","url":"https://flow.mittwald.de/components/status/progress-bar","markdown":"https://flow.mittwald.de/raw/components/status/progress-bar.md","component":"ProgressBar","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"AccentBox","description":"Die AccentBox dient dazu, besondere Inhalte dekorativ hervorzuheben.","url":"https://flow.mittwald.de/components/structure/accent-box","markdown":"https://flow.mittwald.de/raw/components/structure/accent-box.md","component":"AccentBox","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Accordion","description":"Das Accordion blendet Content-Bereiche ein und aus und spart so Platz.","url":"https://flow.mittwald.de/components/structure/accordion","markdown":"https://flow.mittwald.de/raw/components/structure/accordion.md","component":"Accordion","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"Align","description":"Align ordnet bekannte Kombinationen von Components korrekt zueinander an.","url":"https://flow.mittwald.de/components/structure/align","markdown":"https://flow.mittwald.de/raw/components/structure/align.md","component":"Align","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"ColumnLayout","description":"Das ColumnLayout organisiert Inhalte in Spalten, definierbar je Breakpoint.","url":"https://flow.mittwald.de/components/structure/column-layout","markdown":"https://flow.mittwald.de/raw/components/structure/column-layout.md","component":"ColumnLayout","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Combine","description":"Combine ordnet bekannte Kombinationen von Components korrekt zueinander an.","url":"https://flow.mittwald.de/components/structure/combine","markdown":"https://flow.mittwald.de/raw/components/structure/combine.md","component":"Combine","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Flex","description":"Flex ordnet Components CSS-Flexbox-basiert in einem Flex-Container an.","url":"https://flow.mittwald.de/components/structure/flex","markdown":"https://flow.mittwald.de/raw/components/structure/flex.md","component":"Flex","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"LayoutCard","description":"Eine LayoutCard ist ein einfacher Container, der mit beliebigem Inhalt gefüllt werden kann.","url":"https://flow.mittwald.de/components/structure/layout-card","markdown":"https://flow.mittwald.de/raw/components/structure/layout-card.md","component":"LayoutCard","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Section","description":"Eine Section gliedert Content in Teilbereiche und trennt sie durch einen Separator.","url":"https://flow.mittwald.de/components/structure/section","markdown":"https://flow.mittwald.de/raw/components/structure/section.md","component":"Section","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"Separator","description":"Ein Separator ist eine Linie, die inhaltliche Abschnitte voneinander abgrenzt.","url":"https://flow.mittwald.de/components/structure/separator","markdown":"https://flow.mittwald.de/raw/components/structure/separator.md","component":"Separator","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style"]}},{"title":"Table","description":"Die Table zeigt Daten in Zeilen und Spalten und macht Einträge vergleichbar.","url":"https://flow.mittwald.de/components/structure/table","markdown":"https://flow.mittwald.de/raw/components/structure/table.md","component":"Table","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}},{"title":"Tabs","description":"Tabs strukturieren verwandte Inhalte in schnell erreichbaren Ansichten.","url":"https://flow.mittwald.de/components/structure/tabs","markdown":"https://flow.mittwald.de/raw/components/structure/tabs.md","component":"Tabs","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["render","style","wrapWith"]}},{"title":"FileCard","description":"Die FileCard visualisiert Dateien samt relevanter Informationen.","url":"https://flow.mittwald.de/components/upload/file-card","markdown":"https://flow.mittwald.de/raw/components/upload/file-card.md","component":"FileCard","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"FileCardList","description":"Die FileCardList platziert mehrere FileCards in einem ColumnLayout.","url":"https://flow.mittwald.de/components/upload/file-card-list","markdown":"https://flow.mittwald.de/raw/components/upload/file-card-list.md","component":"FileCardList","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"FileDropZone","description":"Die FileDropZone ermöglicht das Hochladen von Dateien per Drag-and-Drop oder durch manuelle Auswahl.","url":"https://flow.mittwald.de/components/upload/file-drop-zone","markdown":"https://flow.mittwald.de/raw/components/upload/file-drop-zone.md","component":"FileDropZone","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components","excludedProps":["wrapWith"]}},{"title":"ImageCropper","description":"Der ImageCropper schneidet ein Bild auf ein bestimmtes Format zu.","url":"https://flow.mittwald.de/components/upload/image-cropper","markdown":"https://flow.mittwald.de/raw/components/upload/image-cropper.md","component":"ImageCropper","remote":{"available":true,"importFrom":"@mittwald/flow-remote-react-components"}}]}