# Grommet: focus on the essential experience

[![PRs Welcome](https://img.shields.io/badge/pr's-welcome-7d4cdb.svg)][contributing]
[![slack](https://img.shields.io/badge/join%20the%20community-slack-fd6fff.svg)][slack]
[![blogs](https://img.shields.io/badge/view%20blogs%20on-medium-000000.svg)][medium]
[![npm package](https://img.shields.io/npm/v/grommet.svg?color=ffca58)][npm]
[![npm downloads](https://img.shields.io/npm/dm/grommet.svg?color=3d138d)][npm]
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)][prettier]

<img align="right" height="260" src="https://v2.grommet.io/img/stak-hurrah.svg">

## Documentation

Visit the [Grommet] website for more information.

## Support / Contributing

Before opening an issue or pull request, please read the [Contributing] guide.

## Install

You can install Grommet using either of the methods given below.

**NOTE: Currently Grommet is only compatible with styled-components v5. We are actively working to add support for v6.**

For npm users:

```shell
  $ npm install grommet styled-components --save
```

For Yarn users:

```shell
  $ yarn add grommet styled-components
```

There are more detailed instructions in the [Grommet Starter] app tutorial for
new apps. For incorporating Grommet into an existing app, see the [Existing App]
version.

## Explore

1. [Storybook] examples per component, you can create them locally by running:

   ```shell
     $ npm run storybook
   ```

   or

   ```shell
     $ yarn storybook
   ```

1. Grommet starter template [sandbox](https://codesandbox.io/p/sandbox/m7mml8l0zj?file=%2Findex.js).
1. [Templates, patterns, and starters][sandboxes]: feel free to share with us
   more pattern ideas on [Slack].
1. End-to-end project examples from our community in the
   [#i-made-this Slack channel][slack].
1. Read more from the Grommet team on [Medium].

## Stable

grommet is also available on a stable branch that is built with the content of the 'master' branch.
From your package.json point to stable.

```
"grommet": "https://github.com/grommet/grommet/tarball/stable",
```

For more info, read the [stable wiki](https://github.com/grommet/grommet/wiki/What-is-grommet-stable-and-how-to-use-it%3F).

## Release History

See the [Change Log].

## Tools Behind Grommet

Grommet is produced using this great tool:

- [BrowserStack] for browser emulators and simulators.
- [Circle CI] for continuous integration.

[browserstack]: https://www.browserstack.com/
[change log]: https://github.com/grommet/grommet/wiki/Change-Log
[circle ci]: https://circleci.com/gh/grommet/grommet/
[contributing]: CONTRIBUTING.md
[existing app]: https://github.com/grommet/grommet-starter-existing-app
[grommet starter]: https://github.com/grommet/grommet-starter-new-app
[grommet]: https://grommet.io/
[medium]: https://medium.com/grommet-io
[npm]: https://www.npmjs.com/package/grommet
[prettier]: https://github.com/prettier/prettier
[sandboxes]: https://codesandbox.io/u/grommetux/sandboxes
[sandbox]: https://codesandbox.io/p/sandbox/m7mml8l0zj?file=%2Findex.js
[slack]: https://slack-invite.grommet.io
[storybook]: https://storybook.grommet.io
