{"version":"17.9.1","generatedAt":"2026-07-10T13:51:50.098Z","baseUrl":"https://www.marigold-ui.io","pages":[{"name":"ActionBar","slug":"components/actions/actionbar","category":"components/actions","description":"Used for single and bulk actions","badge":"alpha","url":"/components/actions/actionbar.md"},{"name":"Button","slug":"components/actions/button","category":"components/actions","description":"Buttons allow users to trigger actions.","badge":null,"url":"/components/actions/button.md"},{"name":"Link","slug":"components/actions/link","category":"components/actions","description":"Interactive component to help users navigate to new pages.","badge":null,"url":"/components/actions/link.md"},{"name":"LinkButton","slug":"components/actions/link-button","category":"components/actions","description":"Interactive component that resembels a button to help users navigate to new pages.","badge":null,"url":"/components/actions/link-button.md"},{"name":"ToggleButton","slug":"components/actions/toggle-button","category":"components/actions","description":"An action button that retains an active state.","badge":"beta","url":"/components/actions/toggle-button.md"},{"name":"MarigoldProvider","slug":"components/application/provider","category":"components/application","description":"Container for apps using Marigold.","badge":null,"url":"/components/application/provider.md"},{"name":"RouterProvider","slug":"components/application/routerprovider","category":"components/application","description":"Provider for easier handling routing.","badge":null,"url":"/components/application/routerprovider.md"},{"name":"SelectList","slug":"components/collection/selectlist","category":"components/collection","description":"A component for displaying a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions.","badge":null,"url":"/components/collection/selectlist.md"},{"name":"Table","slug":"components/collection/table","category":"components/collection","description":"Display and interact with structured data in rows and columns.","badge":null,"url":"/components/collection/table.md"},{"name":"Tag","slug":"components/collection/tag","category":"components/collection","description":"Used to manage related options.","badge":null,"url":"/components/collection/tag.md"},{"name":"Badge","slug":"components/content/badge","category":"components/content","description":"Component for short notes with one color as status messages","badge":null,"url":"/components/content/badge.md"},{"name":"Card","slug":"components/content/card","category":"components/content","description":"Component to support the structuring of information.","badge":null,"url":"/components/content/card.md"},{"name":"Divider","slug":"components/content/divider","category":"components/content","description":"Component to separate content.","badge":null,"url":"/components/content/divider.md"},{"name":"EmptyState","slug":"components/content/empty-state","category":"components/content","description":"Inform users when there is no content to display.","badge":"beta","url":"/components/content/empty-state.md"},{"name":"Headline","slug":"components/content/headline","category":"components/content","description":"The title of a content section","badge":null,"url":"/components/content/headline.md"},{"name":"Icon","slug":"components/content/icon","category":"components/content","description":"How to use Marigold Icons","badge":null,"url":"/components/content/icon.md"},{"name":"List","slug":"components/content/list","category":"components/content","description":"Used to display an unordered or ordered list.","badge":null,"url":"/components/content/list.md"},{"name":"Loader","slug":"components/content/loader","category":"components/content","description":"Used to indicate the progress of the task.","badge":null,"url":"/components/content/loader.md"},{"name":"SectionMessage","slug":"components/content/section-message","category":"components/content","description":"Display important information in a section of a screen.","badge":null,"url":"/components/content/section-message.md"},{"name":"SVG","slug":"components/content/svg","category":"components/content","description":"Wrapper for SVG elements","badge":null,"url":"/components/content/svg.md"},{"name":"Text","slug":"components/content/text","category":"components/content","description":"Component for displaying text paragraphs","badge":null,"url":"/components/content/text.md"},{"name":"Form","slug":"components/form","category":"components","description":"Wrap your fields to submit user data and enable input validation.","badge":null,"url":"/components/form.md"},{"name":"Autocomplete","slug":"components/form/autocomplete","category":"components/form","description":"A searchfield that displays a dynamic list of suggestions.","badge":null,"url":"/components/form/autocomplete.md"},{"name":"Calendar","slug":"components/form/calendar","category":"components/form","description":"A date selection interface for choosing dates from a calendar view.","badge":null,"url":"/components/form/calendar.md"},{"name":"Checkbox","slug":"components/form/checkbox","category":"components/form","description":"Component to select one or more options.","badge":null,"url":"/components/form/checkbox.md"},{"name":"ComboBox","slug":"components/form/combobox","category":"components/form","description":"A text-field that allows the user to select values from a provided items array.","badge":null,"url":"/components/form/combobox.md"},{"name":"DateField","slug":"components/form/datefield","category":"components/form","description":"Component for entering date in forms.","badge":null,"url":"/components/form/datefield.md"},{"name":"DatePicker","slug":"components/form/datepicker","category":"components/form","description":"Component used to pick date value.","badge":null,"url":"/components/form/datepicker.md"},{"name":"DateRangePicker","slug":"components/form/daterangepicker","category":"components/form","description":"Pick a start and end date through a single field.","badge":"beta","url":"/components/form/daterangepicker.md"},{"name":"FileField","slug":"components/form/file-field","category":"components/form","description":"A form component for uploading files with drag and drop support.","badge":null,"url":"/components/form/file-field.md"},{"name":"Multiselect","slug":"components/form/multiselect","category":"components/form","description":"A text-field that allows the user to select multiples values from a provided items array.","badge":"deprecated","url":"/components/form/multiselect.md"},{"name":"NumberField","slug":"components/form/number-field","category":"components/form","description":"Component for entering numbers.","badge":null,"url":"/components/form/number-field.md"},{"name":"Radio","slug":"components/form/radio","category":"components/form","description":"Component which allows to select only one option from a list.","badge":null,"url":"/components/form/radio.md"},{"name":"RangeCalendar","slug":"components/form/rangecalendar","category":"components/form","description":"Used to select a contiguous date range","badge":"alpha","url":"/components/form/rangecalendar.md"},{"name":"SearchField","slug":"components/form/search-field","category":"components/form","description":"Component which allows user to enter and clear a search query.","badge":null,"url":"/components/form/search-field.md"},{"name":"Select","slug":"components/form/select","category":"components/form","description":"Dropdown for selecting an option among different options.","badge":null,"url":"/components/form/select.md"},{"name":"Slider","slug":"components/form/slider","category":"components/form","description":"Allows to make selections from a range of values.","badge":null,"url":"/components/form/slider.md"},{"name":"Switch","slug":"components/form/switch","category":"components/form","description":"Component that switches between two states.","badge":null,"url":"/components/form/switch.md"},{"name":"TagField","slug":"components/form/tag-field","category":"components/form","description":"A multi-select field that displays selected items as removable tags with a searchable dropdown.","badge":"beta","url":"/components/form/tag-field.md"},{"name":"TextArea","slug":"components/form/textarea","category":"components/form","description":"Component for entering multiline text input.","badge":null,"url":"/components/form/textarea.md"},{"name":"TextField","slug":"components/form/textfield","category":"components/form","description":"Component for input forms.","badge":null,"url":"/components/form/textfield.md"},{"name":"TimeField","slug":"components/form/timefield","category":"components/form","description":"Component for entering time in forms.","badge":null,"url":"/components/form/timefield.md"},{"name":"DateFormat","slug":"components/formatters/dateformat","category":"components/formatters","description":"Helper component for formatting date values based on the current language and locale-specific conventions.","badge":null,"url":"/components/formatters/dateformat.md"},{"name":"NumericFormat","slug":"components/formatters/numericformat","category":"components/formatters","description":"Helper component for formatting numeric based on the current language and locale-specific conventions.","badge":null,"url":"/components/formatters/numericformat.md"},{"name":"cn","slug":"components/hooks-and-utils/cn","category":"components/hooks-and-utils","description":"Helper that combines classnames together.","badge":null,"url":"/components/hooks-and-utils/cn.md"},{"name":"cva","slug":"components/hooks-and-utils/cva","category":"components/hooks-and-utils","description":"Helper to write styles for an element.","badge":null,"url":"/components/hooks-and-utils/cva.md"},{"name":"extendTheme","slug":"components/hooks-and-utils/extendTheme","category":"components/hooks-and-utils","description":"Function used to customize theme components styles.","badge":null,"url":"/components/hooks-and-utils/extendTheme.md"},{"name":"parseFormData","slug":"components/hooks-and-utils/parseFormData","category":"components/hooks-and-utils","description":"Parse form data into objects","badge":null,"url":"/components/hooks-and-utils/parseFormData.md"},{"name":"useAsyncListData","slug":"components/hooks-and-utils/useAsyncListData","category":"components/hooks-and-utils","description":"Hook that returns async data","badge":null,"url":"/components/hooks-and-utils/useAsyncListData.md"},{"name":"useListData","slug":"components/hooks-and-utils/useListData","category":"components/hooks-and-utils","description":"Manages state for an immutable list data structure, and provides convenience methods to update the data over time.","badge":null,"url":"/components/hooks-and-utils/useListData.md"},{"name":"useResponsiveValue","slug":"components/hooks-and-utils/useResponsiveValue","category":"components/hooks-and-utils","description":"Hook that returns values based on screen sizes.","badge":null,"url":"/components/hooks-and-utils/useResponsiveValue.md"},{"name":"useTheme","slug":"components/hooks-and-utils/useTheme","category":"components/hooks-and-utils","description":"Hook that applies a theme","badge":null,"url":"/components/hooks-and-utils/useTheme.md"},{"name":"VisuallyHidden","slug":"components/hooks-and-utils/visually-hidden","category":"components/hooks-and-utils","description":"Hide children but keep content accessible","badge":null,"url":"/components/hooks-and-utils/visually-hidden.md"},{"name":"AppLayout","slug":"components/layout/app-layout","category":"components/layout","description":"A CSS Grid container with three named areas sidebar, header, and main.","badge":"beta","url":"/components/layout/app-layout.md"},{"name":"Aside","slug":"components/layout/aside","category":"components/layout","description":"Component to separate content from the main content.","badge":null,"url":"/components/layout/aside.md"},{"name":"Aspect","slug":"components/layout/aspect","category":"components/layout","description":"Keep media elements at a certain apsect ratio.","badge":null,"url":"/components/layout/aspect.md"},{"name":"Breakout","slug":"components/layout/breakout","category":"components/layout","description":"When you need to break out of a grid layout.","badge":null,"url":"/components/layout/breakout.md"},{"name":"Center","slug":"components/layout/center","category":"components/layout","description":"Component to center its children horizontally.","badge":null,"url":"/components/layout/center.md"},{"name":"Columns","slug":"components/layout/columns","category":"components/layout","description":"Position content in one row.","badge":null,"url":"/components/layout/columns.md"},{"name":"Container","slug":"components/layout/container","category":"components/layout","description":"Keep content at an optimal reading width.","badge":null,"url":"/components/layout/container.md"},{"name":"Grid","slug":"components/layout/grid","category":"components/layout","description":"Arrange elements in a grid structure.","badge":null,"url":"/components/layout/grid.md"},{"name":"Inline","slug":"components/layout/inline","category":"components/layout","description":"Display children horizontally in a row.","badge":null,"url":"/components/layout/inline.md"},{"name":"Inset","slug":"components/layout/inset","category":"components/layout","description":"Adds space around its children.","badge":null,"url":"/components/layout/inset.md"},{"name":"Scrollable","slug":"components/layout/scrollable","category":"components/layout","description":"Lets the content scroll.","badge":null,"url":"/components/layout/scrollable.md"},{"name":"Split","slug":"components/layout/split","category":"components/layout","description":"Component that creates spacing between two flex elements.","badge":null,"url":"/components/layout/split.md"},{"name":"Stack","slug":"components/layout/stack","category":"components/layout","description":"Display children vertically with giving space between.","badge":null,"url":"/components/layout/stack.md"},{"name":"Tiles","slug":"components/layout/tiles","category":"components/layout","description":"Organize the content in tiles of equal width.","badge":null,"url":"/components/layout/tiles.md"},{"name":"Accordion","slug":"components/navigation/accordion","category":"components/navigation","description":"Component to show and hide related content from the main page.","badge":null,"url":"/components/navigation/accordion.md"},{"name":"Breadcrumbs","slug":"components/navigation/breadcrumbs","category":"components/navigation","description":"A component for displaying hierarchical navigation with separators.","badge":null,"url":"/components/navigation/breadcrumbs.md"},{"name":"Pagination","slug":"components/navigation/pagination","category":"components/navigation","description":"Component that divides up large datasets into manageable chunks.","badge":null,"url":"/components/navigation/pagination.md"},{"name":"Sidebar","slug":"components/navigation/sidebar","category":"components/navigation","description":"Persistent navigation panel for organizing app-level navigation.","badge":"beta","url":"/components/navigation/sidebar.md"},{"name":"Tabs","slug":"components/navigation/tabs","category":"components/navigation","description":"Component for building tabs.","badge":null,"url":"/components/navigation/tabs.md"},{"name":"TopNavigation","slug":"components/navigation/topnavigation","category":"components/navigation","description":"A component for building a persistent top navigation bar with flexible slot-based layout.","badge":"beta","url":"/components/navigation/topnavigation.md"},{"name":"ContextualHelp","slug":"components/overlay/contextual-help","category":"components/overlay","description":"Displays contextual help via popover on button click","badge":null,"url":"/components/overlay/contextual-help.md"},{"name":"Dialog","slug":"components/overlay/dialog","category":"components/overlay","description":"Component for displaying dialogs.","badge":null,"url":"/components/overlay/dialog.md"},{"name":"Drawer","slug":"components/overlay/drawer","category":"components/overlay","description":"Component for showing additional content alongside the main page.","badge":null,"url":"/components/overlay/drawer.md"},{"name":"Menu","slug":"components/overlay/menu","category":"components/overlay","description":"Flexible component for constructing dynamic and customizable menus.","badge":null,"url":"/components/overlay/menu.md"},{"name":"Toast","slug":"components/overlay/toast","category":"components/overlay","description":"Toasts are used to display brief messages or notifications that appear temporarily on the screen.","badge":"beta","url":"/components/overlay/toast.md"},{"name":"Tooltip","slug":"components/overlay/tooltip","category":"components/overlay","description":"Component for displaying short information.","badge":null,"url":"/components/overlay/tooltip.md"},{"name":"Accessibility","slug":"foundations/accessibility","category":"foundations","description":"A guide to accessibility best practices for making your product usable for all.","badge":null,"url":"/foundations/accessibility.md"},{"name":"Component Principles","slug":"foundations/component-principles","category":"foundations","description":"The core ideas behind how Marigold components are designed, styled, and composed.","badge":null,"url":"/foundations/component-principles.md"},{"name":"Design Tokens","slug":"foundations/design-tokens","category":"foundations","description":"Here are all design tokens for each theme listet.","badge":null,"url":"/foundations/design-tokens.md"},{"name":"Elevation","slug":"foundations/elevation","category":"foundations","description":"Learn how to use elevation with Marigold.","badge":null,"url":"/foundations/elevation.md"},{"name":"Form Fields","slug":"foundations/form-fields","category":"foundations","description":"Comprehensive guide for working with form fields","badge":null,"url":"/foundations/form-fields.md"},{"name":"Icons","slug":"foundations/icons","category":"foundations","description":"List of all icons from Marigold.","badge":null,"url":"/foundations/icons.md"},{"name":"Layouts","slug":"foundations/layouts","category":"foundations","description":"Learn about how layouting is handled in Marigold","badge":null,"url":"/foundations/layouts.md"},{"name":"Responsive Design","slug":"foundations/responsive","category":"foundations","description":"How Marigold handles breakpoints, responsive values, and the minimum supported screen width.","badge":"new","url":"/foundations/responsive.md"},{"name":"Spacing","slug":"foundations/spacing","category":"foundations","description":"How spacing is applied and used.","badge":"alpha","url":"/foundations/spacing.md"},{"name":"Marigold CLI","slug":"getting-started/cli","category":"getting-started","description":"Component docs, discovery, and project setup, straight from the terminal.","badge":"new","url":"/getting-started/cli.md"},{"name":"Design Principles","slug":"getting-started/design-principles","category":"getting-started","description":"Guidelines for the creation of effective and user-friendly interfaces.","badge":null,"url":"/getting-started/design-principles.md"},{"name":"Token Guidelines","slug":"getting-started/design-token-guidelines","category":"getting-started","description":"Learn about the structure and application of our design tokens","badge":null,"url":"/getting-started/design-token-guidelines.md"},{"name":"Adapting examples for agents","slug":"getting-started/examples-for-agents","category":"getting-started","description":"How to take a Marigold application example and make it run in your own app, whatever framework you use.","badge":"new","url":"/getting-started/examples-for-agents.md"},{"name":"Get in touch","slug":"getting-started/get-in-touch","category":"getting-started","description":"How to reach us when you need help with Marigold.","badge":null,"url":"/getting-started/get-in-touch.md"},{"name":"How to Contribute","slug":"getting-started/how-to-contribute","category":"getting-started","description":"How to bring your ideas, feedback, and work into Marigold.","badge":null,"url":"/getting-started/how-to-contribute.md"},{"name":"Installation","slug":"getting-started/installation","category":"getting-started","description":"How to setup and get started with Marigold.","badge":null,"url":"/getting-started/installation.md"},{"name":"Recommended Third-party Libraries","slug":"getting-started/recommended-libraries","category":"getting-started","description":"Third-party libraries we recommend pairing with Marigold.","badge":null,"url":"/getting-started/recommended-libraries.md"},{"name":"Release Phases","slug":"getting-started/release-phases","category":"getting-started","description":"Understand the phases that drive component stability, from Alpha to Stable","badge":null,"url":"/getting-started/release-phases.md"},{"name":"Usage with AI","slug":"getting-started/usage-with-ai","category":"getting-started","description":"Connect AI coding assistants to the Marigold documentation.","badge":"updated","url":"/getting-started/usage-with-ai.md"},{"name":"Async Data Loading","slug":"patterns/feedback/async-data-loading","category":"patterns/feedback","description":"Learn how to implement async data loading patterns in interactive components.","badge":null,"url":"/patterns/feedback/async-data-loading.md"},{"name":"Feedback Messages","slug":"patterns/feedback/feedback-messages","category":"patterns/feedback","description":"Learn when to use which message.","badge":null,"url":"/patterns/feedback/feedback-messages.md"},{"name":"Loading States","slug":"patterns/feedback/loading-states","category":"patterns/feedback","description":"Learn when to use which loading state.","badge":null,"url":"/patterns/feedback/loading-states.md"},{"name":"Admin- and Mastermark","slug":"patterns/layout/admin-master-mark","category":"patterns/layout","description":"Marking internal-only features.","badge":"beta","url":"/patterns/layout/admin-master-mark.md"},{"name":"App Shell","slug":"patterns/layout/app-shell","category":"patterns/layout","description":"A composition pattern for building application frames with persistent sidebar navigation, a top bar, and scrollable content.","badge":"alpha","url":"/patterns/layout/app-shell.md"},{"name":"Filter","slug":"patterns/user-input/filter","category":"patterns/user-input","description":"Understand methods to refine data.","badge":"alpha","url":"/patterns/user-input/filter.md"},{"name":"Form Implementation","slug":"patterns/user-input/form-implementation","category":"patterns/user-input","description":"This page should introduce you on how to develop form logic with Marigold.","badge":null,"url":"/patterns/user-input/form-implementation.md"},{"name":"Forms","slug":"patterns/user-input/forms","category":"patterns/user-input","description":"Guidelines for building a consistent form structure","badge":"beta","url":"/patterns/user-input/forms.md"},{"name":"Multiple Selection","slug":"patterns/user-input/multiple-selection","category":"patterns/user-input","description":"Learn about how & when to use multiple selection","badge":null,"url":"/patterns/user-input/multiple-selection.md"}]}