Shadcn Gantt Settings Menu

Gantt chart with settings menu and schedulable rows. Built by composing Button, Card, Gantt, Gantt I18n, Gantt Nav and 8 more. Uses date-fns alongside the shadcn primitives. A free, open source shadcn gantt example you can install with npx shadcn@latest add @reui/c-gantt-1 and edit as your own code.

Gantt chart with settings menu and schedulable rows

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A tabbed Settings popover with 12 display and behavior switches, 6 languages and 5 time zones, over empty rows waiting to be scheduled

When to use

Project plans where a tree of phases and tasks owns bars dragged and resized along a time axis
Roadmaps, status reports and team capacity views read anywhere from a single day to a whole year
Delivery tracked against a frozen plan, or work chained by dependency arrows and milestone diamonds

When not to use

A lean starting point with no settings panel to strip out: use the Gantt Drag Reorder example
A finished planner page with an edit dialog, dispatch rows and rules checked on drop: use the Gantt blocks
A quarter of sales deals grouped by account, beside board, table and calendar views: use the CRM blocks
A list of dated steps or updates read in order, with no bars to drag or resize: use the Timeline component

Agent notes

handleSelectSlot adds the scheduled bar with addEvent and saves nothing; send the slot to your API there
Right to left comes from dir on the wrapping div, which Gantt inherits; set it on your own layout for Arabic
SettingsMenu and the 14 useState hooks feeding it only demo the props; pass the values you want straight to Gantt
Replace buildBars, which dates its sample bars from the start of the current week, with your own records
Every example seeds bars through defaultEvents alone; pass events with onEventsChange to keep edits in your store

Third-party API docs

date-fns v4: docs

Markdownhttps://reui.io/components/gantt/c-gantt-1.md

MCPget_example("c-gantt-1")

Installnpx shadcn@latest add @reui/c-gantt-1

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Gantt Settings Menu

Dependencies

date-fns

About Shadcn Gantt Settings Menu

What You Can Build With Shadcn Gantt Settings Menu

Composes Button, Card, Gantt, Label, Popover, Radio Group, Select, Switch, Tabs, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-gantt-1
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Gantt Examples

Drag Reorder Gantt chart with drag-to-reorder tree rows
Quarter Roadmap Gantt chart with quarter roadmap and rollups
Capacity Board Gantt chart with weekly capacity board
Task Table Gantt chart with task table and progress
Baseline Tracking Gantt chart with as-built baseline tracking
Dependencies & Milestones Gantt chart with dependency arrows and milestones

Related Shadcn Component Categories

Hover Card
Open-source shadcn hover card components for profile previews, rich link previews, and contextual details.
Icon Stack
Icon Tile
Open-source shadcn icon tile components for list row media, feature cards, empty states, and dashboard tiles.
Input
Open-source shadcn input components for form entry, search fields, and auth screens.
Input Group
Open-source shadcn input group components for prefixed inputs, suffixed actions, and combined form controls.
Input Otp
Open-source shadcn OTP input components for verification codes, 2FA flows, and secure confirmation screens.

Frequently Asked Questions

When should I use Shadcn Gantt Settings Menu?

Use it for a tabbed Settings popover with 12 display and behavior switches, 6 languages and 5 time zones, over empty rows waiting to be scheduled.

Shadcn Gantt as a whole fits:

Project plans where a tree of phases and tasks owns bars dragged and resized along a time axis
Roadmaps, status reports and team capacity views read anywhere from a single day to a whole year
Delivery tracked against a frozen plan, or work chained by dependency arrows and milestone diamonds

For a lean starting point with no settings panel to strip out, use the Gantt Drag Reorder example. For a finished planner page with an edit dialog, dispatch rows and rules checked on drop, use the Gantt blocks. For a quarter of sales deals grouped by account, beside board, table and calendar views, use the CRM blocks. For a list of dated steps or updates read in order, with no bars to drag or resize, use the Timeline component.

How do I install Shadcn Gantt Settings Menu?

Run npx shadcn@latest add @reui/c-gantt-1. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Gantt Settings Menu free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Gantt Settings Menu use?

It composes Button, Card, Gantt, Label, Popover, Radio Group, Select, Switch, Tabs. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.