Gantt
A Gantt chart.
Q4 2026
- Checkout v2, Sep 14, 2026 to Dec 11, 2026, 70% complete
- Search revamp, Sep 7, 2026 to Nov 6, 2026, 85% complete, projected to finish Nov 25, 2026
Q1 2027
- Design tokens, Dec 7, 2026 to Feb 19, 2027
- Edge cache, No dates yet
Today: November 12, 2026
View code
<Gantt label="Roadmap" start="2026-09-01" end="2027-02-28" today="2026-11-12" labels={labels}>
<Gantt.Group title="Q4 2026">
<Gantt.Item name="Checkout v2" start="2026-09-14" end="2026-12-11" progress={0.7} />
<Gantt.Item name="Search revamp" start="2026-09-07" end="2026-11-06" projectedEnd="2026-11-25" progress={0.85} />
</Gantt.Group>
<Gantt.Group title="Q1 2027">
<Gantt.Item name="Design tokens" start="2026-12-07" end="2027-02-19" />
</Gantt.Group>
</Gantt>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 { Gantt } from "@sdxc/ui/app";Renders the chart inside its own scrolling box: the list column stays put while the axis scrolls sideways, and the axis row stays put while the rows scroll. Size the box from outside (a block size, or a flex parent) for the rows to scroll inside it.
Composition
The parts the component publishes, each a static property of the host.
GanttGantt.GroupOne group: a header row spanning list and axis, then its projects as a list, so a screen reader hears each group's name and count before its rows.Gantt.ItemOne project: its name, glyph and details in the list column, and its bar on the axis, with the dates, progress and projection written out for a screen reader.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
label | string | Yes | The chart's accessible name. |
start | string | Yes | The first day on the axis, as YYYY-MM-DD. |
end | string | Yes | The last day on the axis, as YYYY-MM-DD. |
today | string | No | Today, as YYYY-MM-DD; draws the line when it falls on the axis. |
locale | string | No | Formats the month and day labels. @default "en" |
header | RemixNode | No | The list column's heading row, such as Active and Closed tabs. |
labels | Labels | Yes | |
children | RemixNode | Yes | Gantt.Groups, in order. |
Also accepts everything in Omit<TagProps<"div">, "children">.
Gantt.Group
| Prop | Type | Required | Description |
|---|---|---|---|
title | RemixNode | Yes | The group's name, such as a quarter. |
actions | RemixNode | No | Controls at the group header's end, such as an "Add project" link. |
children | RemixNode | No | Gantt.Items. |
Also accepts everything in Omit<TagProps<"section">, "title" | "children">.
Gantt.Item
| Prop | Type | Required | Description |
|---|---|---|---|
name | string | Yes | |
href | string | No | The project's page; the name in the list and on the bar both link to it. |
icon | RemixNode | No | A 16px glyph before the name, in the list and on the bar. |
meta | RemixNode | No | Trailing details in the list row, such as the lead's avatar and a status. |
start | string | No | The first day, as YYYY-MM-DD; an item without start and end has no bar. |
end | string | No | The target day, as YYYY-MM-DD. |
progress | number | No | How much is done, from 0 to 1, drawn as the bar's fill. |
projectedEnd | string | No | The day the work is projected to finish; past end, a hatched tail runs to it. |
trailing | RemixNode | No | Drawn after the name on the bar, such as a burn-up sparkline. |
Also accepts everything in Omit<TagProps<"li">, "children">.
Also exported
Other components this module publishes.
ganttDay