• Stars
    star
    8,320
  • Rank 4,406 (Top 0.09 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 9 years ago
  • Updated about 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience

PRs Welcome slack blogs npm package npm downloads styled with prettier

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:

  $ npm install grommet styled-components --save

For Yarn users:

  $ 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:

      $ npm run storybook

    or

      $ yarn storybook
  2. Grommet starter template sandbox.

  3. Templates, patterns, and starters: feel free to share with us more pattern ideas on Slack.

  4. End-to-end project examples from our community in the #i-made-this Slack channel.

  5. 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.

Release History

See the Change Log.

Tools Behind Grommet

Grommet is produced using this great tool:

More Repositories

1

grommet-icons

Iconography for Grommet and React.js
JavaScript
331
star
2

grommet-starter-new-app

A tutorial to show how to use Grommet with create-react-app.
JavaScript
322
star
3

design-kit

Grommet Design Kit
294
star
4

jsx-to-string

Parse your React JSX component to string
JavaScript
123
star
5

grommet-ferret

Example application using grommet
JavaScript
119
star
6

grommet-design

Grommet design resources, including design sticker sheets, application templates, and icons.
109
star
7

grommet-starter-existing-app

A tutorial to show how to plug Grommet in an existing app.
JavaScript
82
star
8

grommet-standalone

Sample app using Grommet without the development stack.
JavaScript
78
star
9

hpe-design-system

HPE Design System
JavaScript
48
star
10

grommet-designer

JavaScript
36
star
11

grommet-site

Site for Grommet v2
JavaScript
32
star
12

grommet-docs

Website project for Grommet framework (http://grommet.io)
JavaScript
30
star
13

grommet-people-finder

People finder app that uses LDAP server to look for users, groups and locations.
JavaScript
30
star
14

grommet-cms

Grommet CMS - A content management system with world class UX
JavaScript
30
star
15

grommet-cli

Deprecated, use create-react-app for v2 instead. Command Line interface for grommet
JavaScript
28
star
16

html-jsx-loader

DEPRECATED: html loader module to convert HTML to JSX for webpack
JavaScript
26
star
17

grommet-theme-hpe

Hewlett Packard Enterprise grommet theme
JavaScript
23
star
18

react-desc

Add a schema to your React components based on React PropTypes
JavaScript
21
star
19

grommet-react-app

Integration of Grommet with create-react-app
JavaScript
20
star
20

grommet-addons

Higher order components and utilities based on core grommet components.
JavaScript
17
star
21

grommet-toolbox

[DEPRECATED] Developer Environment for Grommet applications
JavaScript
13
star
22

grommet-infographic

Grommet Infographic Template
JavaScript
12
star
23

grommet-cms-boilerplate

Grommet CMS Boilerplate
JavaScript
12
star
24

micro-frontend

A proof of concept for using React + Grommet in a micro frontend architecture.
JavaScript
12
star
25

grommet-vending

JavaScript
12
star
26

grommet-theme-designer

JavaScript
11
star
27

github-org-stats

Gather statistics for your github organization
JavaScript
11
star
28

nextjs-boilerplate

A boilerplate for using Next.js Framework, React library and the Grommet Component Library.
JavaScript
10
star
29

grommet-index

UI and example server for searching, filtering, and displaying mass quantities of items.
JavaScript
10
star
30

grommet-sample

Sample app of migrating Grommet v1 to v2
JavaScript
8
star
31

react-formify

[DEPRECATED] An uncontrolled react Form component with validation capabilities.
JavaScript
8
star
32

grommet-drone-ui

Grommet UI for Drone CI
JavaScript
7
star
33

grommet-swagger

Swagger API browser built using grommet
JavaScript
7
star
34

grommet-sub-page

Grommet Sub Page Template
JavaScript
6
star
35

grommet-cms-content-blocks

Content blocks for the grommet-cms
JavaScript
5
star
36

grommet-icons-site

Website for grommet-icons library
JavaScript
5
star
37

grommet-templates

Higher order abstraction composite components built from Grommet core components.
JavaScript
5
star
38

grommet-sandbox

Grommet component samples for use with CodeSandbox
JavaScript
5
star
39

grommet-todo

Todo application created on top of Grommet framework
JavaScript
5
star
40

grommet-vertical-narrative

Grommet Vertical Narrative Infographic Template
JavaScript
5
star
41

babel-plugin-grommet

Babel plugin to transform member style imports into default imports
JavaScript
4
star
42

grommet-primary-page

Grommet Primary Page Template
JavaScript
4
star
43

v2-launch-slides

Grommet version 2 launch party slides
TypeScript
4
star
44

grommet-tabular

An exploration of interacting with data in different ways.
JavaScript
4
star
45

grommet-tv

A TV interface prototype built with grommet
JavaScript
4
star
46

next-sample

Sample app using Grommet 2.0
JavaScript
4
star
47

grommet-v1

A mapping of v1 component signatures to v2 implementations
JavaScript
4
star
48

grommet-presentation

A library with a set of components to make presentations on top of Grommet UX framework
JavaScript
4
star
49

grommet-slides

Grommet based slide viewer.
TypeScript
3
star
50

grommet-blog

An oddly simple blog implementation
JavaScript
3
star
51

grommet-details-page

Grommet Details Page Template
JavaScript
3
star
52

grommet-tools

A website for Grommet No-Code tools
JavaScript
2
star
53

image-library

Sample App used for training
PostScript
2
star
54

csun2016

Presentation for CSUN 2016
JavaScript
2
star
55

slide

JavaScript
2
star
56

grommet-bower

Bower distribution of Grommet
JavaScript
2
star
57

grommet-styles

Independent styles for Grommet apps
JavaScript
2
star
58

grommet-publisher

build documentation
JavaScript
2
star
59

hpe-design-tokens

CSS
2
star
60

grommet-interns-onboard

A hub to onboard the interns of 2021
JavaScript
2
star
61

grommet-simple

Minimalist project without the entire dev stack
JavaScript
2
star
62

grommet-theme-hp

HP Inc. grommet theme
JavaScript
2
star
63

grommet-theme-dxc

DXC Technologies grommet theme
JavaScript
1
star
64

grommet-leaflet

Example of using leafletjs.org maps with react and grommet
JavaScript
1
star
65

grommet-chat

JavaScript
1
star
66

grommet-exp

TypeScript
1
star
67

grommet-theme-nineties

1990s theme
JavaScript
1
star
68

grommet-ldap-server

A node-only ldap server for Grommet people finder
JavaScript
1
star
69

grommet-vagrant

A vagrant box to make developing with grommet easier.
Shell
1
star
70

grommet-images

JavaScript
1
star
71

grommet-exp-vite

TypeScript
1
star
72

grommet-email

Produce grommet styled HTML for use in email contexts.
JavaScript
1
star
73

grommet-passport

A Grommet based login utility for HPE Passport.
JavaScript
1
star
74

grommet-exp-theme

TypeScript
1
star
75

grommet-weather

Simple weather app using Grommet.
JavaScript
1
star
76

grommet-stats-site

DataViz showcase for grommet-org-stats
JavaScript
1
star