Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Support Tickets Todo List Block for Ark UI

A support queue sorted by time to breach, with an Unassigned, Mine and All switch and a Take next ticket button that assigns the most urgent ticket, plus Resolve with Undo.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Work a help desk from the top, with this support ticket queue block for React with Ark UI. Each ticket shows its number, its subject, a category Badge, a priority word with a glyph that gets heavier with the level, and a reply clock worked out from a typed due time against a fixed "now": "1 h 20 m to go" or "Breached 25 min ago". Tickets stay sorted by that clock. A Segment Group switches between Unassigned, Mine and All, each with its count. The one Shine Button, "Take next ticket", gives you the most urgent unassigned ticket, switches to Mine and puts focus on the row, and the status line reads "Took QH-1042: breaches in 20 min". Resolve closes one of yours and a one-line Undo in the foot opens it again. The list keeps its height, and an Empty state shows when a view is worked down. Guides rule the bands. For help desks, internal IT queues and any list ranked by a deadline.

FAQ

Where does the time to breach come from?

Each ticket has a typed due time and the block has one fixed AS_OF_TIME. The label is the difference between them in whole minutes, written as minutes, hours or days, and "Breached" once it is negative. Nothing reads the time of day, so the page reads the same on the server and in every time zone.

What does Take next ticket pick?

The unassigned ticket with the least time to go, which is the one already breached if there is one. It moves to Mine, the view switches to Mine and focus lands on that row. When nothing is unassigned the button stays focusable and says so in the status line instead of doing nothing.

What does Undo do after Resolve?

It opens the last ticket you resolved again, still yours, back in its place by clock. Only the latest resolve can be taken back; taking a new ticket clears it.

What stays local, and how do I wire it for real?

Owners and resolutions live in the page and reset on reload; nothing is sent. Call your tickets API from takeNext, resolve and undo, and keep the sort, which only needs each ticket's due time.

How is priority shown without color?

As a word with a glyph beside it: one chevron for High, two for Urgent and a dash for Normal. A breached clock also gets a warning icon and heavier text, so nothing depends on a hue.

How does it look on a phone?

The switch and its counts wrap under the heading, each ticket's subject wraps over its badge, priority and clock, and Resolve stays at the end of the row. Take next ticket sits under the header sentence.

All 100 todo list blocks