Gantt 1 - Timeline with dependencies and week/month scale
A gantt chart with task rows, progress-filled bars, SVG dependency arrows, a today marker on a fixed date and a toggle between week and month scales. Use it for project plans, launch schedules or roadmap views that need to show sequencing.
About Gantt 1
A gantt chart with task rows, progress-filled bars, SVG dependency arrows, a today marker on a fixed date and a toggle between week and month scales. Use it for project plans, launch schedules or roadmap views that need to show sequencing.
Gantt 1 is a free gantt block for React, built on shadcn/ui and Tailwind CSS. It ships as 158 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- gantt
- timeline
- project plan
- dependencies
- schedule
- roadmap
- svg
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/gantt-01Uses: reveal, utils.
Usage
import Gantt01 from "@/components/blocks/gantt-01"
export default function Page() {
return <Gantt01 />
}