# Gantt

> A Gantt chart: grouped rows of projects, each a name in a sticky list beside a bar on a shared time axis, with months and weeks across the top and today's line through every row.

```ts
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.

## Examples

```tsx
<Gantt label="Gantt" start="2026-09-01" end="2027-03-31" today="2026-11-12" labels={labels}>
	<Gantt.Group title="Q4 2026">
		<Gantt.Item name="Checkout v2" href="/projects/checkout" start="2026-10-01" end="2026-12-15" progress={0.6} />
	</Gantt.Group>
</Gantt>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `string` | The chart's accessible name. |
| `start` | `string` | The first day on the axis, as `YYYY-MM-DD`. |
| `end` | `string` | The last day on the axis, as `YYYY-MM-DD`. |
| `today?` | `string` | Today, as `YYYY-MM-DD`; draws the line when it falls on the axis. |
| `locale?` | `string` | Formats the month and day labels. @default "en" |
| `header?` | `RemixNode` | The list column's heading row, such as Active and Closed tabs. |
| `labels` | `Labels` |  |
| `children` | `RemixNode` | Gantt.Groups, in order. |

Also accepts everything in `Omit<TagProps<"div">, "children">`.


### Gantt.Group

One 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.

| Prop | Type | Description |
| --- | --- | --- |
| `title` | `RemixNode` | The group's name, such as a quarter. |
| `actions?` | `RemixNode` | Controls at the group header's end, such as an "Add project" link. |
| `children?` | `RemixNode` | Gantt.Items. |

Also accepts everything in `Omit<TagProps<"section">, "title" | "children">`.


### Gantt.Item

One 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.

| Prop | Type | Description |
| --- | --- | --- |
| `name` | `string` |  |
| `href?` | `string` | The project's page; the name in the list and on the bar both link to it. |
| `icon?` | `RemixNode` | A 16px glyph before the name, in the list and on the bar. |
| `meta?` | `RemixNode` | Trailing details in the list row, such as the lead's avatar and a status. |
| `start?` | `string` | The first day, as `YYYY-MM-DD`; an item without `start` and `end` has no bar. |
| `end?` | `string` | The target day, as `YYYY-MM-DD`. |
| `progress?` | `number` | How much is done, from 0 to 1, drawn as the bar's fill. |
| `projectedEnd?` | `string` | The day the work is projected to finish; past `end`, a hatched tail runs to it. |
| `trailing?` | `RemixNode` | Drawn after the name on the bar, such as a burn-up sparkline. |

Also accepts everything in `Omit<TagProps<"li">, "children">`.


## Also exported

- `ganttDay`