Grommet Controls

Grommet Controls is a library of extension components for Grommet 2, the React-based UI toolkit, adding data tables, form inputs, notifications, layout elements and Chart.js chart wrappers to a Grommet application.

What is Grommet Controls?

Grommet Controls is a collection of controls built on top of Grommet 2, the React UI framework. It extends Grommet with a PagingTable that offers pagination, filtering, footer, child rows and grouping; input controls such as MaskedInput, DateInput, NumberInput, PasswordInput, EmailInput, ColorInput and DropInput; and layout components including Sidebar, VerticalMenu, Value, Spinning and Notification. The library also includes Chart.js wrappers for BarChart, DoughnutChart, HorizontalBarChart, LineChart, PieChart, PolarChart, RadarChart and ScatterChart, which require the chart.js and react-chartjs-2 packages.

Key Features

• PagingTable — A Grommet 2 table component with pagination, filtering, footer, child rows and grouping, useful for data-dense views.
• Form validation — A Form component with built-in validation, so common form validation does not need a separate library.
• Specialized inputs — NumberInput converts values to numeric type automatically, removing string parsing in onChange events; MaskedInput and EmailInput handle masks.
• Color selection — Colors and ColorInput offer custom color palettes and a masked color entry field with a drop button.
• Navigation — Sidebar is collapsible and VerticalMenu is a hierarchical collapsible menu.
• Chart.js integration — Eight chart types are available as React components, including bar, doughnut, line, pie, polar, radar and scatter.
• Bundle optimization — Configure babel-plugin-transform-imports for member imports to reduce bundle size.

Who is it for?

• React developers using Grommet 2 — add ready-made controls such as paginated tables and input masks without building them from scratch.
• Dashboard and admin application builders — use PagingTable, Form, Notification and chart components to assemble data-rich interfaces.
• Design system maintainers — extend Grommet with additional themed components while keeping a consistent look and feel.

What can you do with Grommet Controls?

• Data-heavy interfaces: Display paginated, filterable tables with PagingTable, including footers, child rows and grouping.
• Form-heavy workflows: Combine Form, DropInput, NumberInput, PasswordInput, EmailInput and ColorInput to create validated entry forms.
• Chart dashboards: Wrap Chart.js charts in React components for bar, line, pie, radar and scatter visualizations.
• Sidebar navigation: Use Sidebar and VerticalMenu to add collapsible navigation to admin areas.

How does Grommet Controls work?

Install the package with npm install grommet-controls and import components directly. For member imports, configure babel-plugin-transform-imports with entries for grommet-controls, grommet-controls/chartjs, and grommet-controls/themes to keep bundles lean. The documentation site at grommet-controls.netlify.app provides details and examples, and a sample application is available to clone from the grommet-controls-sample GitHub repository.

FAQ

What is Grommet Controls?

Grommet Controls is a set of extension components for Grommet 2, a React UI framework. It provides tables, form inputs, notifications, layout elements and Chart.js chart wrappers that you can drop into a Grommet-based app.

How do I install Grommet Controls?

Run npm install grommet-controls in your project. For Chart.js components, you also need to install chart.js and react-chartjs-2.

Does Grommet Controls work with Next.js?

The repository metadata lists Next.js as a related topic, and a sample app can be cloned from GitHub. Since the components are React-based, they can be used in a Next.js project, though the documentation focuses on Grommet 2.

Do I need to import the whole library?

No. You can configure babel-plugin-transform-imports to load only specific member components, which reduces bundle size and prevents the full library from being pulled into your bundles.