Tailwind Resources Logo Tailwind Resources
Marigold screenshot

Marigold

Author Avatar Theme by Marigold ui
Updated: 23 May 2025
127 Stars

Design System based on react-aria and Tailwind CSS

Github Live Preview

Categories

Nextjs React React aria Templates & themes Ui kits & component libraries

Overview

Marigold is a React implementation of the Marigold Design System, which is based on Emotion and theme-ui. It provides a collection of pre-styled components that can be used to build consistent and visually appealing user interfaces. This product analysis will explore the key features of Marigold, provide installation instructions, and summarize the article.

Features

  • Design System: Marigold is based on the Marigold Design System, which provides a consistent set of design principles and guidelines for building user interfaces.
  • React Implementation: Marigold is implemented using React, a popular JavaScript library for building user interfaces.
  • Emotion and theme-ui: Marigold leverages Emotion and theme-ui to handle styling and theming in a scalable and efficient manner.

Installation

To use Marigold, you need to install it separately. Here’s how you can do it:

  1. Open your terminal and navigate to the desired folder.
  2. Clone the project repository by running the command git clone https://github.com/marigold-ui/marigold.git.
  3. Navigate to the newly created folder using the command cd marigold.
  4. Install the required packages by running the command pnpm install in the root folder.
  5. Start the Storybook development server by running the command pnpm dev. This will open Storybook at localhost:1337, where you can browse and interact with the components.
  6. If you want to explore the documentation, navigate to the docs folder using the command cd docs.
  7. Start the development server for the documentation site by running the command pnpm start. This will open the documentation site at localhost:3000, where you can read about the components and their usage.

Note: The installation requires pnpm to be installed on your system. If you don’t have it, you can install it by running the command npm install -g pnpm.

Summary

Marigold is a React implementation of the Marigold Design System, providing pre-styled components that can be used to build visually appealing user interfaces. It leverages Emotion and theme-ui for efficient styling and theming. To get started with Marigold, you can follow the installation instructions provided above.