Installation

On this page, you'll find instructions to install Marigold and set up the provider.

Want to try it first?

Use our interactive playground to explore Marigold without any setup.

Installation

Install the component library, the system package, and the RUI theme:

 npm install @marigold/components @marigold/system @marigold/theme-rui

pnpm add @marigold/components @marigold/system @marigold/theme-rui

Marigold also provides an additional package you can install as needed:

@marigold/icons: A set of ready-to-use icon components

Prefer an automated setup?

The Marigold CLI can do the steps below for you. Run marigold init in an existing Next.js or Vite project to install the packages, patch your CSS and config, and wrap the root with MarigoldProvider.

Set up a Marigold project with Tailwind CSS (Recommended)

Use this path when Marigold is the whole app. theme.css paints the document body automatically and emits design tokens at :root, so you get the intended look with zero extra markup.

Pairing Marigold with Tailwind CSS gives you the full design system as it was intended, not a frozen, pre-compiled snapshot. Tailwind tree-shakes unused styles for smaller bundles, and lets you use the same utility scale (spacing, colors, breakpoints) in your own components that Marigold uses internally. Dev tooling like IntelliSense and JIT compilation work across both Marigold and your app code, making this the most flexible and ergonomic setup for real-world projects.

If you're starting a new project, we recommend using Vite, Next.js or any other modern JavaScript framework as your build tool. Marigold is designed to work seamlessly with these tools.

Language

All examples below use TypeScript.

Vite

First set up a new Vite project, following the official guide. Then install Tailwind CSS and follow the instructions below to add Marigold.

Add the following content to your index.css:

@import 'tailwindcss';
@import '@marigold/theme-rui/theme.css';

/* You need to add the path to the marigold packages */
@source '../node_modules/@marigold';

Then wrap your app with MarigoldProvider and pass it the theme. This is required for all components to render correctly.

import { MarigoldProvider } from '@marigold/components';
import theme from '@marigold/theme-rui';

export const App = () => (
  <MarigoldProvider theme={theme}>{/* Your App */}</MarigoldProvider>
);

Next.js

Set up a new Next.js project using the official guide. Then install Tailwind CSS by following the Next.js installation guide and follow the instructions below to add Marigold. The Next.js installer can set up Tailwind CSS for you automatically.

Add the following content to your globals.css:

@import 'tailwindcss';
@import '@marigold/theme-rui/theme.css';

/* You need to add the path to the marigold packages */
@source '../../node_modules/@marigold';

Then create a providers.tsx file.

'use client';
import { MarigoldProvider } from '@marigold/components';
import theme from '@marigold/theme-rui';

export function Providers({ children }: { children: React.ReactNode }) {
  return <MarigoldProvider theme={theme}>{children}</MarigoldProvider>;
}

Then wrap your app with the Providers component in layout.tsx.

Quick start (pre-built CSS)

Use this path for a drop-in stylesheet, or when Marigold lives alongside another design system. styles.css scopes all its rules to [data-theme="rui"], so you control exactly where Marigold paints. This is the fastest way to get started but does not allow customization beyond the provided design tokens.

import { MarigoldProvider } from '@marigold/components';
import theme from '@marigold/theme-rui';
import '@marigold/theme-rui/styles.css';

export const App = () => (
  <MarigoldProvider theme={theme}>{/* Your App */}</MarigoldProvider>
);

Place data-theme="rui" on the element you want Marigold to paint. For a Marigold-first app, add it to <html>:

<html data-theme="rui">
  ...
</html>

To mount Marigold as an island inside another app, wrap the Marigold subtree in a <div> carrying the attribute. Everything outside the wrapper keeps its own styling:

<div data-theme="rui">
  <MarigoldProvider theme={theme}>{/* Marigold UI */}</MarigoldProvider>
</div>

Adding fonts

The RUI theme uses the Inter font family. You have two options:

Using Font Source:

npm install @fontsource-variable/inter

Then import it in your app's entry point:

import '@fontsource-variable/inter';

Using Next.js: Take advantage of next/font for automatic font optimization. Add Inter to your project in layout.tsx:

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

[...]

<html className={inter.className}>

Next steps

Explore the available components or read about our component principles to understand the design decisions behind Marigold.

Last update: a month ago

On this page, you'll find instructions to install Marigold and set up the provider.

Want to try it first?

Use our interactive playground to explore Marigold without any setup.

Installation

Install the component library, the system package, and the RUI theme:

 npm install @marigold/components @marigold/system @marigold/theme-rui

pnpm add @marigold/components @marigold/system @marigold/theme-rui

Marigold also provides an additional package you can install as needed:

@marigold/icons: A set of ready-to-use icon components

Prefer an automated setup?

Set up a Marigold project with Tailwind CSS (Recommended)

Use this path when Marigold is the whole app. theme.css paints the document body automatically and emits design tokens at :root, so you get the intended look with zero extra markup.

If you're starting a new project, we recommend using Vite, Next.js or any other modern JavaScript framework as your build tool. Marigold is designed to work seamlessly with these tools.

Language

All examples below use TypeScript.

Vite

First set up a new Vite project, following the official guide. Then install Tailwind CSS and follow the instructions below to add Marigold.

Add the following content to your index.css:

@import 'tailwindcss';
@import '@marigold/theme-rui/theme.css';

/* You need to add the path to the marigold packages */
@source '../node_modules/@marigold';

Then wrap your app with MarigoldProvider and pass it the theme. This is required for all components to render correctly.

import { MarigoldProvider } from '@marigold/components';
import theme from '@marigold/theme-rui';

export const App = () => (
  <MarigoldProvider theme={theme}>{/* Your App */}</MarigoldProvider>
);

Next.js

Add the following content to your globals.css:

@import 'tailwindcss';
@import '@marigold/theme-rui/theme.css';

/* You need to add the path to the marigold packages */
@source '../../node_modules/@marigold';

Then create a providers.tsx file.

'use client';
import { MarigoldProvider } from '@marigold/components';
import theme from '@marigold/theme-rui';

export function Providers({ children }: { children: React.ReactNode }) {
  return <MarigoldProvider theme={theme}>{children}</MarigoldProvider>;
}

Then wrap your app with the Providers component in layout.tsx.

Quick start (pre-built CSS)

import { MarigoldProvider } from '@marigold/components';
import theme from '@marigold/theme-rui';
import '@marigold/theme-rui/styles.css';

export const App = () => (
  <MarigoldProvider theme={theme}>{/* Your App */}</MarigoldProvider>
);

Place data-theme="rui" on the element you want Marigold to paint. For a Marigold-first app, add it to <html>:

<html data-theme="rui">
  ...
</html>

To mount Marigold as an island inside another app, wrap the Marigold subtree in a <div> carrying the attribute. Everything outside the wrapper keeps its own styling:

<div data-theme="rui">
  <MarigoldProvider theme={theme}>{/* Marigold UI */}</MarigoldProvider>
</div>

Adding fonts

The RUI theme uses the Inter font family. You have two options:

Using Font Source:

npm install @fontsource-variable/inter

Then import it in your app's entry point:

import '@fontsource-variable/inter';

Using Next.js: Take advantage of next/font for automatic font optimization. Add Inter to your project in layout.tsx:

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

[...]

<html className={inter.className}>

Next steps

Explore the available components or read about our component principles to understand the design decisions behind Marigold.

Last update: a month ago