Marigold

React implementation of the Marigold Design System based on react-aria and Tailwind CSS.

Installation 🔧

# with pnpm
pnpm add @marigold/components

# with npm
npm install @marigold/components --save

# with yarn
yarn add @marigold/components


# for development:
git clone https://github.com/marigold-ui/marigold.git
cd marigold

# with pnpm
pnpm install

# with npm
npm install

# with yarn
yarn install

If you want to use a marigold theme you have to install them seperatly like:

# with pnpm
pnpm add @marigold/theme-b2b

# with npm
npm install @marigold/theme-b2b --save

# with yarn
yarn add @marigold/theme-b2b

Usage 💡

Use the styles for your component from a global theme object. To provide the theme in context, wrap your component into the MarigoldProvider.

// basic usage
import React from 'react'
import { MarigoldProvider, Text } from '@marigold/components'
import b2bTheme from '@marigold/theme-b2b'

<MarigoldProvider theme={b2bTheme}>
  <Text>Lorem ipsum</Text>
</MarigoldProvider>

For Developers

Setup & Usage

Open a terminal and navigate to a folder of your choice. Clone the project git clone https://github.com/marigold-ui/marigold.git and navigate to the new folder cd marigold. Install the packages using pnpm install command in the root and use pnpm watch to start storybook. Open localhost:1337 to see the components in storybook. Navigate to the documentation cd docs and start the development server pnpm dev, which opens the documentation site on localhost:3000. When working on the components, use the following commands for development.

• Coverage: pnpm test:coverage
• Linting: pnpm lint
• Test: pnpm test (with optional --watch)
• Type checking: pnpm typecheck

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Sebastian Sebald 💻 🎨 📖 👀	sarahgm 💻 🎨 📖 👀	Benedikt Grether 💻 🎨 📖 👀	viktoria-schwarz 💻 📖 🚇	ti10le 💻 📖 🚇
Toshi 💻 📖 🎨	Julian Thiel 📖	johannaracky 📖	Ikko Ashimine 📖	andres-dediego2 🎨
snragund 📖	Michael Partheil 🤔	lauraNawrotzki 🤔	Osama Abdul Latif 💻 🎨 🚧 ⚠️ 📖	Marcel Köhler 📖 💻 🎨 💡 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!