React implementation of the Marigold Design System based on react-aria and Tailwind CSS.
# 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
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>
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
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!