Have ideas to improve npm?Join in the discussion! »

    TypeScript icon, indicating that this package has built-in type declarations

    3.0.1 • Public • Published

    Grommet Controls: a pack of extensions for Grommet 2

    Visit the Grommet 2 website if you are not familiar with Grommet.


    Visit the grommet-controls website for more information.

    Support / Contributing

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

    Sample App

    The quickest way to get started is to clone the Grommet Controls Sample page.


    To install Grommet Controls:

      $ npm install grommet-controls


    To avoid the entire library being pulled into your bundles when using member imports, you can use babel-plugin-transform-imports and configure your .babelrc file:

      $npm install -save-dev babel-plugin-transform-imports
      edit .babelrc:
        "plugins": [
          ["styled-components", { "ssr": true, "displayName": true, "preprocess": false }],
          ["transform-imports", {
            "grommet-controls": {
              "transform": "grommet-controls/es6/components/${member}",
              "preventFullImport": true,
              "skipDefaultConversion": true
            "grommet-controls/chartjs": {
              "transform": "grommet-controls/es6/chartjs/${member}",
              "preventFullImport": true,
              "skipDefaultConversion": true
            "grommet-controls/themes": {
              "transform": "grommet-controls/es6/themes/${member}",
              "preventFullImport": true
            "grommet": {
              "transform": "grommet/es6/components/${member}",
              "preventFullImport": true,
              "skipDefaultConversion": true
            "grommet/contexts": {
              "transform": "grommet/es6/contexts/${member}",
              "preventFullImport": true,
              "skipDefaultConversion": true
            "grommet/themes": {
              "transform": "grommet/es6/themes/${member}",
              "preventFullImport": true,
              "skipDefaultConversion": true
            "grommet/components/hocs": {
              "transform": "grommet/es6/components/hocs",
              "preventFullImport": true,
              "skipDefaultConversion": true
            "grommet-icons/contexts": {
              "transform": "grommet-icons/es6/contexts/${member}",
              "preventFullImport": true,
              "skipDefaultConversion": true
            "grommet-icons": {
               "transform": "grommet-icons/es6/icons/${member}",
               "preventFullImport": false,
               "skipDefaultConversion": true


    • PagingTable A Grommet 2 table component with pagination, filtering, footer, child rows and grouping.
    • Card A Card-type container.
    • Tag A tag control with a label and icon.
    • Tags A list of tags that can be removed.
    • Notification A Box to display notification messages.
    • Colors A color selection element, with custom color palettes.
    • ImageStamp A small image stamp used for avatars or image thumbnails.
    • DropInput An Input control with an optional drop button with the specified 'dropContent' or widgets.
    • MaskedInput A masked Input control with an optional drop button with the specified 'dropContent'.
    • DateInput A masked date entry field with a drop down calendar.
    • NumberInput A masked number input, with widgets to increment/decrement the value. Automatically converts the value to a numeric type, so you dont have to parse strings in your onChange event.
    • PasswordInput A password field with show/hide password toggle.
    • EmailInput A masked input with a default mask for handling email addresses.
    • ColorInput A masked color entry field, with a drop button to select a color.
    • Form A Form with built-in validation.
    • Spinning A spinning process indicator.
    • Value A single value with a label.
    • Sidebar Collapsible side bar component.
    • VerticalMenu Hierarchical collapsible menu.

    Charts (chart.js)

        $ npm install chart.js
        $ npm install react-chartjs-2


    npm i grommet-controls

    DownloadsWeekly Downloads






    Unpacked Size

    1.25 MB

    Total Files


    Last publish


    • avatar