Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marigold-ui/marigold
Design System based on react-aria and Tailwind CSS
https://github.com/marigold-ui/marigold
a11y aria component-library design-system design-tokens react react-aria style tailwind tailwindcss theme ui
Last synced: 3 months ago
JSON representation
Design System based on react-aria and Tailwind CSS
- Host: GitHub
- URL: https://github.com/marigold-ui/marigold
- Owner: marigold-ui
- License: mit
- Created: 2020-01-14T13:28:07.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T14:22:31.000Z (7 months ago)
- Last Synced: 2024-04-14T02:55:38.970Z (7 months ago)
- Topics: a11y, aria, component-library, design-system, design-tokens, react, react-aria, style, tailwind, tailwindcss, theme, ui
- Language: TypeScript
- Homepage: https://marigold-ui.io
- Size: 186 MB
- Stars: 100
- Watchers: 3
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- License: LICENSE
- Code of conduct: CODE-OF-CONDUCT.md
Awesome Lists containing this project
README
[![ci][ci-badge]][ci] [![coverage][coverage-badge]][coverage] [![MIT License][license-badge]][license] [![version][version-badge]][package]
[](https://open.vscode.dev/marigold-ui/marigold)
# Marigold
React implementation of the Marigold Design System based on [react-aria](https://react-spectrum.adobe.com/react-aria/) and [Tailwind CSS](https://tailwindcss.com/).
## Installation 🔧
```sh
# 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:
```sh
# 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'
Lorem ipsum
```
## 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](http://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](http://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](https://allcontributors.org/docs/en/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](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
[ci]: https://github.com/marigold-ui/marigold/actions/workflows/build.yml
[ci-badge]: https://github.com/marigold-ui/marigold/actions/workflows/build.yml/badge.svg
[license]: https://github.com/marigold-ui/marigold/blob/master/LICENSE
[license-badge]: https://img.shields.io/github/license/marigold-ui/marigold?style=flat-square
[package]: https://www.npmjs.com/package/@marigold/components
[version-badge]: https://img.shields.io/npm/v/@marigold/components?style=flat-square
[coverage]: https://codecov.io/github/marigold-ui/marigold/branch/main
[coverage-badge]: https://codecov.io/github/marigold-ui/marigold/branch/main/graph/badge.svg?token=YIIcKX7TZu