Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tax Prep Todo List Block for Ark UI

A tax-season checklist where each document has a Collected, Missing or Not applicable status, not-applicable items leave the percentage, and an aside counts the days to a fictional deadline.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Gather what the return needs and see how close you are, with this tax prep to-do list block for React with Ark UI. Three sections (income documents, deductions and filing steps) list ten items, and each has a Native Select with Collected, Missing and Not applicable (Done, To do and Not applicable for the filing steps). Not applicable takes an item out of the denominator, so a section reads "4 of 8, 2 not applicable" and its Progress bar measures what is actually needed. An aside at the start holds the deadline, the days to go worked out from a fixed day, and the overall percentage; it moves above the sections on a phone. Guides rule the aside and the bands. Sample items, not tax advice. For finance apps, accountants' portals and annual-admin checklists.

FAQ

What does Not applicable change?

It removes the item from the count. With ten items and two not applicable, the percentage is collected items over eight, not ten. The section summary and the overall figure both say how many were set aside.

Where does the days-to-go figure come from?

From a fixed deadline and a fixed "today", subtracted as day numbers with Date.UTC. Nothing reads the clock, so the page prints the same text on the server and in the browser. In your app, pass the real dates.

Is this tax advice?

No. The items are samples and the deadline is fictional; the block says so beside the figures. Replace START with the documents your product actually asks for.

What stays local, and how do I save for real?

The statuses live in the page and reset on reload. Persist from the pick handler, one write per change, and load the starting statuses from your own data.

How does it look on a phone?

The aside stacks above the sections, each row keeps its select under the title at full width, and the bars stay full width. The selects are native, so the phone's own picker opens.