Isometric Network
An isometric network plate — pin nodes on an extruded slab, connected by lifted arcs with pulses travelling from the hub outward.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/isometric-network.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/isometric-network.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | IsometricNetworkNode[] | — | Pins on the plate. Defaults to one hub and four edges. |
| speed | number | 1 | Pulse travel speed multiplier. |
| accent | string | "oklch(0.65 0.25 250)" | Accent for hub cap and pulses. |
| size | number | 380 | Rendered width in px. |
| className | string | — | Additional CSS classes. |