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 (over 6 years ago)
- Default Branch: main
- Last Pushed: 2025-04-08T12:19:37.000Z (about 1 year ago)
- Last Synced: 2025-04-08T12:28:07.863Z (about 1 year 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: 204 MB
- Stars: 124
- Watchers: 3
- Forks: 11
- Open Issues: 8
-
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-gist]] [![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/).
## Release notes
Check out our latest [release notes](https://www.marigold-ui.io/releases/overview)
## Documentation
Do you want to start using the Marigold Design System?
Then get started in the [Marigold documentation](https://www.marigold-ui.io/getting-started/installation).
## Techstack
[](https://react.dev)
[](https://react-spectrum.adobe.com/react-aria/)
[](https://vitest.dev)
[](https://storybook.js.org/)
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
## Local Development
### 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`
- navigate to the new folder `cd marigold`
- install the packages using `pnpm install`
### Storybook
To start storybook use the following command in the root:
- `pnpm sb`
- open [localhost:6006](http://localhost:6006)
### Marigold Documentation
To start documentation follow these steps:
- navigate to the documentation `cd docs`
- start the development server `pnpm dev`
- open [localhost:3000](http://localhost:3000).
### Command overview
| Command | Description |
| -------------------------- | ------------------------------------------------------------------------------------- |
| pnpm dev | Start the documentation app in dev mode. |
| pnpm start | Start the documentation app in production mode. |
| pnpm sb | Start Storybook using the components and system source folders. |
| pnpm build | Build components and theme packages. |
| pnpm build:docs | Build the documentation app. |
| pnpm build:sb | Build the Storybook configuration. |
| pnpm build:themes | Build all theme packages. |
| pnpm registry | Run the documentation registry task. |
| pnpm build:component-props | Generate/build component props tables for the docs. |
| pnpm test | Run tests with Vitest. |
| pnpm test:coverage | Run tests with coverage. |
| pnpm test:ci | Run tests for CI. |
| pnpm test:sb | Run Storybook component tests. |
| pnpm clean | Remove node_modules, dist, .next, .turbo, coverage, and storybook-static directories. |
| pnpm clean:build | Remove dist folders and coverage reports. |
| pnpm lint | Lint the repository with ESLint. |
| pnpm format | Format files with Prettier. |
| pnpm format:fix | Format and attempt to fix with Prettier. |
| pnpm typecheck | Build docs, then run TypeScript type checking (no emit). |
| pnpm typecheck:only | Run TypeScript type checking only (no emit). |
| pnpm contributor | Run the all-contributors CLI. |
| pnpm changeset | Run the Changesets CLI. |
## 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
📖 💻 🎨 💡 ⚠️ 🚇 🚧 👀
pauleitenbichler
💻
Sinan Akdesir
💻 📖 💡 🎨 🚧 ⚠️
Jim Wiedemann
💻 🎨 📖 💡 ⚠️
marekgieldatsh
💻 🎨 💡 ⚠️
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-badge-gist]: https://img.shields.io/endpoint?url=https%3A%2F%2Fgist.githubusercontent.com%2Faromko%2F8c5471b20c94ae2845addb4336e80919%2Fraw%2Fvitest-coverage-badge.json&style=flat-square&label=Vitest&style=flat-square&logo=vitest&logoColor=white