The HPE Design System provides guidance and theming for a large subset of Grommet components, but is not exhaustive. Some, like DataChart and Video have not yet been customized by the HPE Design System. Others, like Image, Keyboard, and ResponsiveContext provide tremendous utility, but may not require specific HPE styling or guidance.
Below you will find a comprehensive list of all Grommet components, examples for each, and either a link to Design System usage guidance or Grommet documentation in cases where guidance is not yet available.
Jump to a specific component type:
Layout
Box
Card

Unleash the power of data
Propelled by the nexus of data, cloud, and AI, HPE is delivering groundbreaking innovations that completely reimagine how organizations unleash the power of their data.
Grid
Header
Layer
Main
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Stack
Type
Heading
Markdown
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Paragraph
Text
Controls
Accordion
Anchor
Drop
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Pagination
Tabs
Tip
Input
CheckBox
CheckBoxGroup
DateInput
FileInput
Form
FormField
MaskedInput
RangeInput
RangeSelector
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Select
TextArea
TextInput
Visualizations
Avatar
Calendar
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Clock
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
DataChart
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Diagram
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
List
- ActiveEric Soderberg
- InactiveShimrit Yacobi
- ActiveChris Carlozzi
- ActiveMatthew Glissmann
- InactiveTaylor Seamans
Meter
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Spinner
DataTable
Storage Pools
Arrays | Pinned % | ||||||
---|---|---|---|---|---|---|---|
thh8y | Asup-array01-lvs (default) | Asup | asup-array01-lvs | 14.6 | 1.9 | 3% | 333.2 |
7phfb | Dev-K8-Sym-R5-3 (default) | Dev | harm-stage-array01 | 204.2 | 4.6 | 5% | 333.2 |
79kyz | Dev36-erray01 (default) | Dev | harm-stage-array02 | 173.4 | 3.7 | 7% | 3955.2 |
95xjq | asup-array1 (default) | Asup | harm-stage-array04 | 118.8 | 2.8 | 2% | 3.9 |
ccnpr | Dev-K8-Sym-R5-3 (default) | Dev | Harm-cs-stage-R4-5 | 62.8 | 2.9 | 8% | 333.2 |
0knx4 | asup-array2 (default) | Asup | ds-array02 | 82.5 | 10.2 | 0% | 3955.2 |
qeqgj | Dev36-varray02 (default) | Dev | ds-array01 | 92.5 | 11.3 | 0% | 333.2 |
s9419 | DevHarmCs2R39 | Dev | harm-stage-array03 | 7.2 | 0.1 | 1% | 333.2 |
56t7a | DevStageSymR31 (default) | Dev | rtp-array198 | 64.3 | 1.4 | 0% | 333.2 |
koten | asup-array2 (default) | Asup | ds-array02 | 5.1 | 11.4 | 0% | 3955.2 |
j8wyc | Dev36-varray02 (default) | Dev | ds-array01 | 0.6 | 1.2 | 0% | 333.2 |
l4ai2 | DevHarmCs2R39 | Dev | harm-stage-array03 | 47.9 | 2.3 | 0% | 333.2 |
ybzf3 | DevStageSymR31 (default) | Dev | rtp-array198 | 27.9 | 20.5 | 3% | 333.2 |
WorldMap
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Media
Carousel
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Image
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Video
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Utilities
AnnounceContext
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Collapsible
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Grommet
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
InfiniteScroll
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Keyboard
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
ResponsiveContext
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
SkipLinks
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
ThemeContext
This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.