Marigold
v18.0.0-beta.4
Marigold
v18.0.0-beta.4

Application

MarigoldProvider
RouterProvider

Layout

AppShellbeta
Aside
Aspect
Center
Columns
Container
Grid
Inline
Inset
Pagebeta
Panelbeta
Scrollable
Split
Stack
Tiles

Actions

Buttonupdated
ButtonGroupbeta
Link
LinkButton
ToggleButtonbeta

Form

Autocomplete
Calendar
Checkbox
ComboBox
DateField
DatePicker
DateRangePickerbeta
FileField
Form
NumberField
Radio
RangeCalendaralpha
SearchField
SegmentedControlbeta
Select
SelectListupdated
Slider
Switchupdated
TagFieldbeta
TextArea
TextField
TimeField

Collection

Cardupdated
Table
Tag
ActionBaralpha

Navigation

Accordion
Breadcrumbs
Pagination
Sidebarbeta
Tabs
TopNavigationbeta

Overlay

ActionMenualpha
ContextualHelp
Dialog
Drawer
Menuupdated
Toastbeta
Tooltip

Content

Badge
Descriptionalpha
Divider
EmptyStatebeta
ErrorStatebeta
Headline
Keyboardbeta
List
Loader
SectionMessage
SVG
Text
TextValuealpha
Titlealpha

Formatters

DateFormat
NumericFormat

Hooks and Utils

cn
cva
extendTheme
parseFormData
useAsyncListData
useLandmark
useListData
useTheme
VisuallyHidden
Components

RouterProvider

Provider for easier handling routing.

The <RouterProvider> is a component from react-aria-components which we expose to give you a simple way to handle your routes in your application.

Usage

The <RouterProvider> is a context provider that integrates React Aria's navigation system with your router (like React Router, Next.js, or custom routing). It enables accessibility-aware navigation by informing components (like <Link> and useRouter) about the current location and navigation methods.

React Router

You can use the provider with the useNavigate hook from react-router-dom. The outcome from the function you can pass into the navigate prop from the <RouterProvider>.

If you want to read more about it visit React Aria's documentation about it here.

Next.js

Similar to React Router you can pass in the navigate prop the routes you get from the useRouter hook.

Also for more information please visit React Aria's documentation about it here.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
View RouterProvider stories
Last update: 4 months ago

MarigoldProvider

Container for apps using Marigold.

AppShell

The layout frame of an application with sidebar navigation, a top bar, and the page content.

On this page

UsageReact RouterNext.jsProps