Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

CRM Tasks Todo List Block for Radix UI

A table of sales follow-ups with kind, stage, value and due label, a Due date or Deal value sort, a Log it button that asks when to follow up next, and an open-value total.

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

Chase the next conversation with every deal, with this CRM follow-up list for React with Radix UI. A Table lists each follow-up: the contact's initials in an Avatar, the company, the kind (a call, an email or a meeting, as an icon and a word), the deal stage in a Badge, the deal value and a due label worked out from a fixed "today". A Toggle Group sorts by Due date or Deal value. "Log it" completes the follow-up and turns the button into a Native Select, "Schedule next", with In 3 days, In a week and No more; the choice books the next follow-up from the fixed day, or drops the deal's last one. The foot totals what is open: "Open value £48,500 across 6 follow-ups". On a phone the stage, value and due day fold into the second line of the first cell. Guides rule the bands. For sales teams, account managers and any list of people to get back to.

FAQ

What does Log it do?

It marks the follow-up as done and replaces the button with a select asking when to chase next. Until you choose, the row is set aside from the total. Choosing In 3 days or In a week sets the next due day from the fixed AS_OF and puts the row back in the sort; No more removes it.

How is the open value worked out?

It is the sum of the values of the follow-ups that are not waiting for a choice, counted in whole pounds and written with thousands separators by a small helper, so it reads the same on every machine. The count beside it comes from the same rows.

How are the due labels worked out?

From ISO days against AS_OF: "Overdue 2 days", "Today", "Tomorrow", then a short date. A late follow-up is also set in heavier text, so the cue is not a colour.

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

The follow-ups live in the page and reset on reload. Save each log and each next date from log and schedule to your CRM's activity API.

How do I reach the empty state?

Log every follow-up and choose No more for each one. The table keeps its height and an Empty message shows in its place.

How does it look on a phone?

Only the follow-up and its action are columns. Each row's second line carries the stage, the due day and the value, and the select fits beside the company.

All 100 todo list blocks