ContributionGraph
A year of per-day counts at a glance, as a real <table role="grid">.
View code
<ContributionGraph
days={days}
start="2025-11-14"
end="2026-11-13"
locale="en-US"
href={(date) => `/sergiodxa?tab=overview&from=${date}&to=${date}`}
labels={{
caption: `${total.toLocaleString("en-US")} contributions in the last year`,
day: (count, date) => `${count === 0 ? "No" : count} contribution${count === 1 ? "" : "s"} on ${date}`,
less: "Less",
more: "More",
}}
/>Demo apps
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- Issue trackerCairnCairn, an invented issue tracker: grouped issue lists with filters in the address, a drag-and-drop board, projects on a roadmap, cycles with burn-up charts and an inbox./demo/apps/cairn
- Social networkChorusChorus, an invented social network: a live timeline with pictures, link cards, polls and threads, profiles, grouped notifications, search and messages./demo/apps/chorus
- Code hostDeltaDelta, a code host whose one repository is its own source: a file tree beside the code, line links, blame and the commits list, every file and commit read from git when the site is built./demo/apps/delta
- CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
- Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
- Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
- Chat assistantTernTern, an invented chat assistant: conversations with streamed replies, code and tables, projects, a canvas, sharing and settings./demo/apps/tern
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { ContributionGraph } from "@sdxc/ui/app";Without script each day's title names its count; mapping @sdxc/ui/app/contribution-graph in
the browser entry runs ContributionGraphTooltip, for a shared tooltip and arrow keys. Size
it with --ui-contribution-graph-cell and -gap, match -bg to the surface, tint --graph-level-0–4.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
days | readonly Day[] | Yes | The counts to plot, in any order; only days between start and end are drawn. |
start | string | Yes | The first day drawn, as YYYY-MM-DD. |
end | string | Yes | The last day drawn, as YYYY-MM-DD; its week is kept in view on a phone. |
levels | readonly number[] | No | Lower bound of levels 0 to 4: a day takes the highest level its count reaches. @default [0, 1, 4, 8, 12] |
href | (date: string) => string | No | Where a day leads, such as that day's activity; days are links when set. |
locale | string | No | Locale for month and weekday names, and for the first day of the week. |
weekStart | number | No | First day of the week, 0 = Sunday; defaults to the locale's. |
labels | Labels | Yes | Every string the graph shows, so it reads in any language. |
Also accepts everything in Omit<TagProps<"div">, "children">.
Also exported
Other components this module publishes.
weekStartForcontributionLevel