Grommet's modular design enables you to use the parts of Grommet applicable to your application. There are several ways you can benefit from using Grommet based on the needs of your users and your application. The options range from referencing the style guide and its basic elements to complete adoption of the platform.

Style Guide

Your team references the Grommet style guide with an emphasis on brand alignment - primarily around the logo, font, and color palette. If your application is not in a position to begin adopting a new platform, this option may be the most appropriate option. You may find the Grommet CSS elements a useful reference.

Style Sheets

Your application uses the Grommet CSS elements to ensure styling of components is aligned. Your application's DOM structure will likely need to change to align with the DOM structure expected by the Grommet CSS.


Your application leverages the Grommet components with the accompanying markup, styling, and images. This model is appropriate in several situations:

  • Your application is new or is being refactored to use the Grommet components.
  • Your application uses AngularJS and you want to use Grommet components for the "view" in your MVC architecture.
  • Your application is being updated to use Grommet components in replacing portions of the user interface based on legacy technologies such as Adobe Flex or Java Applets.


Your application is new or is being rewritten to use the Grommet components and a set of common services for features as search, associations, and dashboards.