Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Task Budget Projection Integration Block for React

An integration stats section for an intake forms tool connected to Zapier: a tasks-used bar, a billing cycle bar with a hatched stretch to a projected last day, rolling tasks remaining, and seven daily columns with the halted part hatched.

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

An integration stats section for React with Base UI, written for Formsill, a fictional intake forms tool for service businesses whose submissions can start a Zap, and its Zapier connection. The copy is at the start: a title, a sentence naming the day the budget runs out at this pace, and the mark pair. Under it, a Progress bar of the tasks used so far, a window bar for the billing cycle whose solid part is today, whose hatched stretch runs ahead to a solid tick at the projected last day, and a list of figures (tasks remaining on a rolling number, the daily pace, the day it runs out, the days of the cycle left uncovered). At the end, behind a divider, a framed drawing of the last seven days as columns: each column is that day's tasks, with the part that came from halted runs hatched on top. Every figure is worked out from the typed budget, the tasks used and the seven daily counts. It's built from Guides, Progress and SlidingNumber, with your theme's tokens for every colour. Zapier is named in text only: no Zapier logo, colour or wordmark ships with the block. The counts are example data; nothing is read from Zapier.

FAQ

How is the projected day worked out?

The tasks remaining are the budget minus the tasks used. The pace is the average of the seven daily counts. The days to go are the tasks remaining divided by that pace, rounded up, and the day it runs out is that many days after the last day shown. Change DAYS, USED or BUDGET and the bars, the tick, the weekday and every figure follow.

What counts as a task?

That is Zapier's rule, set by your plan, and this block does not decide it: it draws the numbers you give it. Check Zapier's own documentation for what spends a task before you wire real counts in.

What is the hatched part of a column?

The tasks that came from runs that halted that day, drawn as hatching with a foreground outline so it reads without colour. The solid part is everything else. The caption gives the week's total and the halted total in text.

How do screen reader users get the figures?

The columns are a drawing, so each one carries a hidden sentence ("Tuesday: 213 tasks, 8 from halted runs.") and the figure's caption repeats the totals. The two bars are hidden from assistive technology, because the figures list and the title already give the same numbers.

Does anything move?

The tasks-remaining number rolls into place once when it scrolls into view and shows its final value at once under reduced motion. The title fades up once on load. Nothing else animates.

How does it behave on a phone and in right-to-left layouts?

On a phone the bars sit above the columns, which then run the full width of the screen. The bars and the columns are drawings and keep a left-to-right order in any layout; the day names and numbers are isolated so they never reorder.

  • Pro

    Zap Recipe Detail Integration

    With a product drawing

    An integration detail section for a form tool connecting to Zapier: a header with the mark pair and a Connect Zapier Shine Button, a three-cell Zap recipe with chevrons on the joins, what it sends and reads, and three steps.

  • Pro

    Catch Hook Setup Integration

    Keys and code

    An integration setup section for a form tool working with Zapier: three numbered steps (a copyable Catch Hook address, a sample submission, a field check), a Finish setup Shine Button, and a framed JSON tree of the sample, shown first on wide screens.

  • Pro

    Zap Run History Replay Integration

    Synced tables

    An integration list section for an intake forms tool connected to Zapier: a table of Zap runs with a chain of three dots for the steps, a state in words and a Replay on halted or held runs, and a tally worked out from the rows.

  • Pro

    Triggers And Actions Grid Integration

    Switch and tick grids

    An integration grid section for a form tool working with Zapier: a derived tally and status line, then a split with the three triggers at the start and the three actions at the end, each a checkbox cell in shared hairlines.

  • Pro

    Recovery Step-Down Integration

    Bars and columns

    An integration stats section for a failed-payment recovery tool connecting to Stripe: a framed step-down chart of failed payments, a bar for each attempt that won some back and a hatched bar for what was lost, with a big recovered share and three counts worked out from four typed numbers.

  • Pro

    Usage Meters Billing

    Plan and usage

    Usage meters for an app's settings: one row per quota with its count, a bar that turns to a warning tone at 80% and an over-limit tone past 100%, and a plain line on what happens next.

All 100 integration blocks