The Grommet Design Kit provides a set of sticker sheets and templates to help bootstrap your design process.

The Grommet Design Kit is designed to work specifically with grommet.io, Grommet is a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package. It's also the de-facto UI framework HPE uses to build apps and websites. All of our component design files works especially well when paired with grommet! Go check it out and tell your devs!

To learn more, visit grommet.io

There are two ways to use the Sketch Component Library; One, by manually downloading the Sketch file that contains the entire symbol library (best for folks that want to enhance the design and contribute ideas to the grommet theme) or, Two, add the Sketch Library (read-only) version that automagically updates from the Cloud! The later, being better for folks that just want to use the standard elements and ensure they're always up to date.

Download the Sketch Component Library

Click the link to add to you your Sketch app, Sketch Component Library

If you don't see this window, goto the Menubar and navigate to, Sketch/ Preferences.../ Libraries or use shortcut command + , and add it manually with the + button. (see below)

Adobe XD is a great alternative to Sketch (Mac only) for users looking for design and prototyping in the Adobe and Microsoft ecosystems.

Download the XD Components

The closet we have to parity between the designer and developer. Framer X takes Sketch libraries to the next level by not only having design components but coded components in the same design tool, providing the closest fidelity to the running app.

Download the Framer X Components

For teams that want a web based solution, Figma is a great alternative as it can be run in any modern browser and it has a bunch of cool features to check out. From asset creation to comments on the designs, its a great way to work collaboratively with the components...

Open the file on Figma