Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

SLA Bullet Bars Integration Block for React

An integration stats section for a Help Center suggestion tool connected to Zendesk: four bullet bars of median first reply time against the SLA target for each ticket priority, each with a word and a glyph, and a derived count within target.

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 Answerloft, a fictional tool that suggests Help Center articles inside support tickets, and its Zendesk connection. A compact header carries the title, a sentence naming how many of the four priorities replied within target, and the mark pair at its end. Under a band rule, four rows run rail to rail, one per ticket priority (Urgent, High, Normal, Low): the median first reply as a bar on a light track, the SLA target as a solid tick at the same place in every row, the measured time, and a word with a glyph ("Within target" with a check, "Over by 1 h 5 min" with an arrow). Each bar is scaled to its own target, so every tick lines up and the bar's length reads as a share of the target. Every bar, word and count is worked out from the typed minutes. It's built from Guides, with your theme's tokens for every colour. Zendesk is named in text only: no Zendesk logo, colour or wordmark ships with the block. The figures are example data for the last 28 days; nothing is read from Zendesk.

FAQ

How do I change the figures?

PRIORITIES holds each priority's SLA target and the median measured, both in minutes. The bar width, the tick, the "Within target" or "Over by" word, the time text and the count in the header are all worked out from those two numbers.

Why do all the ticks line up?

Each bar is scaled to its own target: a bar at 150% of its target fills the track, so the tick sits at the same two thirds in every row. Compare rows by the words and times, not by bar length, since a minute is a different share of each target.

What is the SLA target?

Zendesk lets a support team set service-level targets per ticket priority, including how fast the first reply should come. The targets here are example numbers; read yours from your own policy.

How do screen reader users get the figures?

Every row's text says it all: the priority, its target, the measured time and the verdict in words. The bar is a drawing, hidden from assistive technology. The verdict never relies on colour: it has a glyph and a word.

Is anything interactive?

No. This is a read-only figure with no state and no script. It ends on its last row, so the next block's top rule is its closing line.

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

On a phone the label sits above each bar and the measured time with its verdict under it. In a right-to-left layout the rows mirror but each bar keeps a left-to-right order, since it is a drawing of numbers; times and words are isolated.

  • Pro

    Ticket Suggestions Detail Integration

    With a product drawing

    An integration detail section for a Help Center suggestion tool connected to Zendesk: a mark pair beside a Connect Zendesk button, three scopes read or write, three steps, and a framed example ticket with three ranked article suggestions.

  • Pro

    Help Center Sections Checkbox Tree Setup Integration

    Choose and verify

    An integration setup section for a Help Center suggestion tool connected to Zendesk: a framed checkbox tree of categories and sections with article counts, a brand Select, three read-only steps, a derived indexing line and a Finish setup button.

  • Pro

    Support Surfaces Switch Grid Integration

    Switch and tick grids

    An integration grid section for a Help Center suggestion tool connected to Zendesk: four surfaces (ticket sidebar, web widget, email auto-reply, Help Center search) as hairline cells with a small greyscale drawing and a switch each, and a derived tally.

  • Pro

    Topics Worth an Article Accordion Integration

    Grouped and triaged

    An integration list section for a Help Center suggestion tool connected to Zendesk: an accordion of Help Center sections, the first open, each with ranked topics, a ticket count bar and a Draft article button that turns to Draft started.

  • Pro

    Time to Approve Histogram Integration

    Bars and columns

    An integration stats section for a spend approvals tool posting to Slack: a reverse split with a framed histogram of how long approvals took, a solid hairline at the median, and a list of figures worked out from the six bucket counts.

  • Pro

    Small Multiples Sparkline Stats

    Sparklines

    Six measures of a stationery shop as aligned sparkline rows in one framed panel on a shared month axis, with a guide that reads all six at the month under your pointer.

All 100 integration blocks