UI · Application UI
Activity grid
GitHub-style activity grid with density-aware cell sizing, circle/rounded/square shapes, and brand intensity buckets.
@byronwade/foundation@byronwade/utils
Feature showcase
Installation
Features
7 examples
Default, Columns, Empty, In Card, Intensity Levels, Interactive, Shape And Density.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | number[] | - | Activity counts per cell. |
| columns | number | 26 | Columns in the grid. |
| size | "compact" | "default" | "comfortable" | "default" | Cell size; maps cleanly to docs density controls. |
| shape | "circle" | "rounded" | "square" | "circle" | Cell shape for contribution maps, operational heatmaps, or dense telemetry. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/activity-grid.tsx |
| Default example | content/examples/activity-grid/default.tsx |
| Columns example | content/examples/activity-grid/columns.tsx |
| Empty example | content/examples/activity-grid/empty.tsx |
| In Card example | content/examples/activity-grid/in-card.tsx |
| Intensity Levels example | content/examples/activity-grid/intensity-levels.tsx |
| Interactive example | content/examples/activity-grid/interactive.tsx |
| Shape And Density example | content/examples/activity-grid/shape-and-density.tsx |