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!