docs/components/data/DashboardGrid

DashboardGrid

Responsive dashboard grid.

import { DashboardGrid } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Live playground
Loading preview…

#Props

PropTypeDefaultDescription
minItemWidthstring'320px'Minimum width of each grid item before wrapping.
gap'sm' | 'md' | 'lg' | 'xl''md'Gap between grid items.
maxColumnsnumberundefined (unlimited)Maximum number of columns.
children *JSX.ElementGrid items.
classstring
styleJSX.CSSProperties
unstyledboolean

* required prop.

#Design Tokens

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.

  • --sk-dashboard-grid-gap
  • --sk-dashboard-grid-max-columns
  • --sk-dashboard-grid-min-width
  • --sk-space-md