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

Set up a Marigold project with Tailwind CSS (Recommended)

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)

Import the pre-built CSS file that ships with the theme. 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>
);

You also need to add data-theme="rui" to your <html> element so the theme styles are applied correctly:

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

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: 7 days 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

Set up a Marigold project with Tailwind CSS (Recommended)

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 the pre-built CSS file that ships with the theme. 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>
);

You also need to add data-theme="rui" to your <html> element so the theme styles are applied correctly:

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

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: 7 days ago