• Stars
    star
    8,296
  • Rank 4,198 (Top 0.09 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created about 9 years ago
  • Updated 21 days 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
328
star
2

grommet-starter-new-app

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

design-kit

Grommet Design Kit
295
star
4

jsx-to-string

Parse your React JSX component to string
JavaScript
121
star
5

grommet-ferret

Example application using grommet
JavaScript
120
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
45
star
10

grommet-designer

JavaScript
36
star
11

grommet-site

Site for Grommet v2
JavaScript
32
star
12

grommet-people-finder

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

grommet-cms

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

grommet-docs

Website project for Grommet framework (http://grommet.io)
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

react-desc

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

grommet-theme-hpe

Hewlett Packard Enterprise grommet theme
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

grommet-vending

JavaScript
12
star
25

grommet-theme-designer

JavaScript
11
star
26

github-org-stats

Gather statistics for your github organization
JavaScript
11
star
27

micro-frontend

A proof of concept for using React + Grommet in a micro frontend architecture.
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-sandbox

Grommet component samples for use with CodeSandbox
JavaScript
5
star
38

grommet-templates

Higher order abstraction composite components built from Grommet core components.
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-tv

A TV interface prototype built with grommet
JavaScript
4
star
45

next-sample

Sample app using Grommet 2.0
JavaScript
4
star
46

grommet-tabular

An exploration of interacting with data in different ways.
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

image-library

Sample App used for training
PostScript
2
star
53

csun2016

Presentation for CSUN 2016
JavaScript
2
star
54

slide

JavaScript
2
star
55

grommet-bower

Bower distribution of Grommet
JavaScript
2
star
56

grommet-styles

Independent styles for Grommet apps
JavaScript
2
star
57

grommet-tools

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

grommet-publisher

build documentation
JavaScript
2
star
59

grommet-interns-onboard

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

grommet-simple

Minimalist project without the entire dev stack
JavaScript
2
star
61

grommet-theme-hp

HP Inc. grommet theme
JavaScript
2
star
62

grommet-theme-dxc

DXC Technologies grommet theme
JavaScript
1
star
63

grommet-leaflet

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

grommet-chat

JavaScript
1
star
65

grommet-exp

TypeScript
1
star
66

grommet-ldap-server

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

grommet-vagrant

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

grommet-images

JavaScript
1
star
69

grommet-exp-vite

TypeScript
1
star
70

hpe-design-tokens

CSS
1
star
71

grommet-theme-nineties

1990s theme
JavaScript
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-stats-site

DataViz showcase for grommet-org-stats
JavaScript
1
star
76

grommet-weather

Simple weather app using Grommet.
JavaScript
1
star