Recommended Third-party Libraries

Marigold gives you accessible, themeable components, but a real application needs more than components. We recommend a handful of third-party libraries across our docs for things like styling, data fetching, forms, routing, dates, testing and fonts. This page collects them in one place so you can see at a glance what we recommend and decide what fits your use case.

Styling & build

• Tailwind CSS: Pairing Marigold with Tailwind gives you the full design system as intended: smaller bundles through tree-shaking and the same utility scale (spacing, colors, breakpoints) that Marigold uses internally. See our installation guide and component principles.

• Vite: Our recommended build tool for new projects. See the installation guide.

• Next.js: Recommended framework when you need SSR or a full-stack setup. See the installation guide.

  Fonts

• Inter (via @fontsource-variable/inter): The font family used by the RUI theme. See the installation guide.

Data fetching

• TanStack Query: Use it when you need sophisticated caching, request deduplication or background refetching. For simpler cases, Marigold also exports useAsyncList from @marigold/components (see async data loading).

Forms & validation

• React Hook Form: Manages form state with minimal re-renders. For most forms you don't need it: Marigold's <Form> works with the native form submission and you can read the values with parseFormData from @marigold/components. Only reach for React Hook Form when a form gets genuinely complex (e.g. dynamic field arrays, cross-field dependencies, wizard-like flows); wrap Marigold inputs in its <Controller> component to connect them. See form implementation.
• Zod: TypeScript-first schema validation. Note that Marigold's form components already support validation out of the box (error props and messages, plus native HTML constraints like isRequired), so reach for Zod when you need richer, schema-based rules. See form implementation.

Routing & URL state

Marigold's <RouterProvider> connects your router to React Aria's navigation system so components like <Link> stay accessible. It works with any of the following.

• React Router: Pass its useNavigate result to <RouterProvider>. See RouterProvider.
• TanStack Router: Type-safe routing that also integrates through <RouterProvider>. See RouterProvider.
• nuqs: Manage URL state, ideal for keeping filter settings in sync with the address bar. See the filter pattern.

Dates

• @internationalized/date: Used by our date components for correct date handling across calendars and time zones, avoiding the pitfalls of the native Date object. It is a peer dependency of the date components. See DatePicker and DateField.
• date-fns: If you already use it, you can parse values for Marigold's date components with parseDate. See DatePicker.

Testing

Marigold components are built on accessible primitives, so we recommend testing them the way users interact with them: by role and label rather than implementation details.

• Vitest: Our recommended test runner, fast and ESM-native.
• Testing Library: Query and assert on components through accessible roles and labels.
• @testing-library/user-event: Simulate real user interactions instead of firing raw events.
• Playwright: For end-to-end and real-browser testing across browsers.