# Gantt Standard 1 - Basic gantt chart

> Gantt timeline with sidebar, feature bars, and today marker.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/gantt-gantt-standard-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/gantt-gantt-standard-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/gantt-gantt-standard-1-light-87c99c5c80bb1172.png
- Registry item: https://shadcnblocks.com/r/gantt-gantt-standard-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/gantt-gantt-standard-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://www.kibo-ui.com/r/gantt.json`

## Files

### `example/gantt/gantt-standard-1.tsx`

```tsx
"use client";

import {
  GanttFeatureItem,
  GanttFeatureList,
  GanttHeader,
  GanttProvider,
  GanttSidebar,
  GanttSidebarItem,
  GanttTimeline,
  GanttToday,
} from "@/components/kibo-ui/gantt";

export const title = "Basic gantt chart";

const status = { id: "active", name: "Active", color: "#3b82f6" };
const features = [
  {
    id: "1",
    name: "Discovery",
    startAt: new Date("2026-02-01"),
    endAt: new Date("2026-03-15"),
    status,
  },
  {
    id: "2",
    name: "Build",
    startAt: new Date("2026-03-01"),
    endAt: new Date("2026-05-30"),
    status,
  },
  {
    id: "3",
    name: "Launch",
    startAt: new Date("2026-05-15"),
    endAt: new Date("2026-06-30"),
    status,
  },
];

const Example = () => (
  <GanttProvider
    className="h-[420px] w-full max-w-4xl rounded-lg border border-border"
    range="monthly"
    zoom={100}
  >
    <GanttSidebar>
      {features.map((feature) => (
        <GanttSidebarItem key={feature.id} feature={feature} />
      ))}
    </GanttSidebar>
    <GanttTimeline>
      <GanttHeader />
      <GanttFeatureList>
        {features.map((feature) => (
          <GanttFeatureItem key={feature.id} {...feature} />
        ))}
      </GanttFeatureList>
      <GanttToday />
    </GanttTimeline>
  </GanttProvider>
);

export default Example;
```