Skip to content

Design System based on react-aria and Tailwind CSS

License

Notifications You must be signed in to change notification settings

marigold-ui/marigold

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

type_logo



ci coverage MIT License version

Open in Visual Studio Code

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
Sebastian Sebald

💻 🎨 📖 👀
sarahgm
sarahgm

💻 🎨 📖 👀
Benedikt Grether
Benedikt Grether

💻 🎨 📖 👀
viktoria-schwarz
viktoria-schwarz

💻 📖 🚇
ti10le
ti10le

💻 📖 🚇
Toshi
Toshi

💻 📖 🎨
Julian Thiel
Julian Thiel

📖
johannaracky
johannaracky

📖
Ikko Ashimine
Ikko Ashimine

📖
andres-dediego2
andres-dediego2

🎨
snragund
snragund

📖
Michael Partheil
Michael Partheil

🤔
lauraNawrotzki
lauraNawrotzki

🤔
Osama Abdul Latif
Osama Abdul Latif

💻 🎨 🚧 ⚠️ 📖
Marcel Köhler
Marcel Köhler

📖 💻 🎨 💡 ⚠️

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