Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA macOS-style desktop of icons with box selection, drag to move with grid snapping, double-click or Return to open, and arrow-key navigation.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
items | DesktopItem[] | - | The icons and where they sit. |
onItemsChange | (items: DesktopItem[]) => void | - | Called with the new list after icons are dragged to other cells. |
onOpen | (item: DesktopItem) => void | - | Called when an icon is opened with a double-click or Return. |
cell | number | 96 | Size of one grid cell in pixels. |
label | string | "Desktop" | Accessible name of the desktop. |
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Unique id. |
name | string | - | Label under the icon. |
kind | "folder" | "file" | "drive" | "app" | - | What it is. |
col | number | - | Grid column, from 0 at the left. |
row | number | - | Grid row, from 0 at the top. |
ext | string | - | Extension badge for files. |
tone | "blue" | "teal" | "green" | "amber" | "orange" | "red" | "purple" | "graphite" | - | Icon color. |
glyph | ReactNode | - | Glyph for an app icon. |
DesktopIcons also accepts <div> props.