Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

KYC Compliance Check Monitoring Block for Ark UI

Nine pending know-your-customer cases racing a 24-hour goal, soonest first, with a shrinking time bar, a tier filter, and the stage and reviewer of the case you choose.

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

See which compliance cases are about to miss their goal, with this case desk panel for React with Ark UI. It is Clearbay, a compliance case tool (made up), with nine pending know-your-customer cases and a 24-hour goal. Each case is a row with its id, its tier (Standard or Enhanced) and a bar that shrinks from 24 hours to zero, with "3 h 10 m to go" worked out from one typed clock, or a hatched bar and "Past the goal by 1 h 25 m". A Toggle Group in the header keeps one tier, and the other rows stay in place, unseen. Choosing a case shows its stage (Documents received, Screening or Review) and its reviewer's initials. Three counts sit on top: pending, screening hits and past the goal. Guides draw the frame and its bands; the entrance is CSS only. Cases are invented samples with no real documents or people.

FAQ

How do I use my own cases?

Edit CASES: each has an id, a tier, the instant it was opened (ISO), its stage (0 to 2) and the reviewer's initials. AS_OF is the one clock; time remaining is the opening time plus 24 hours minus AS_OF. The header sentence, the order and the Past the goal count are derived, while PENDING and SCREENING_HITS are typed totals for the whole queue.

How is the time bar read?

A full bar means 24 hours remain and an empty one means the goal is reached. A case past its goal gets a hatched bar instead, as long as its overshoot against four hours, and the words say by how long. The words are always printed beside the bar.

What does the tier filter do?

It keeps the cases of one tier at the top and hides the others without removing them from the layout, so the panel keeps its height. If the case you had chosen is hidden, the choice moves to the soonest visible one, and the status line says what is shown.

What is real here and what stays local?

Nothing is screened and nothing is sent: cases, reviewers and counts are examples. In your app feed the same shape from your case system.

How do I use it with the keyboard?

The cases are one radio group: Tab enters it and the arrow keys move between them. The tier filter is a Toggle Group that always keeps one tier pressed.

How does it look on a phone?

The id and tier sit above the bar, and the three counts stay in one row.

All 100 monitoring blocks