ComponentsEffects
Motion grid
Cells that travel to their new slots when order changes
Atlas
Console
Logs
Secrets
DNS
Edge
Installation
nub add @gpuixui/componentsUsage
import { MotionGrid } from "@gpuixui/fx/motion-grid";
<MotionGrid
items={tools.map((tool) => ({ id: tool.id, content: <ToolCard tool={tool} /> }))}
columns={3}
cellWidth={160}
rowHeight={120}
gap={12}
label="Tool board"
/>;API
| Prop | Type | Default |
|---|---|---|
items | ReadonlyArray<MotionGridItem> (a value that is not a list reads as none; an entry without a text id is dropped) | — |
columns | number | 3 |
cellWidth | number | 160 |
rowHeight | number | 120 |
gap | number | 12 |
level | MotionLevel | "normal" |
label | string | — |
className | string | — |
style | StateStyle<MotionGridState> | — |
Edit this page on GitHubpackages/fx/docs/motion-grid.mdx