Mosaic
A drag-and-drop grid for metric tiles. Users reposition tiles by dragging and resize them by dragging edge handles. Tile content adapts to its current size via a render prop.
Installation
npx dafink-ui add mosaicRequires: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities
Demo
Revenue
$48.5k
+12%
Active users
3,204+5.2%
Revenue over timeLast 8 months
Growth+24%
Composition
<Mosaic>
</Mosaic>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| layout | MosaicTileLayout[] | - | Required. Array of tile layout entries. Each entry has id, col, row, colSpan, and rowSpan. col and row are 1-based grid positions. |
| onLayoutChange | (layout: MosaicTileLayout[]) => void | - | Required. Called when tiles are reordered or resized. |
| cols | number | 12 | Number of grid columns. |
| rowHeight | number | 160 | Base row height in pixels. |
| gap | number | 16 | Gap between tiles in pixels. |
| minColSpan | number | 2 | Minimum column span a tile can shrink to. |
| minRowSpan | number | 1 | Minimum row span a tile can shrink to. |
| maxColSpan | number | cols | Maximum column span. Defaults to the full grid width. |
| maxRowSpan | number | 4 | Maximum row span. |