Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

SLA Bullet Bars Integration Block for Solid

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 Solid with Ark 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.

All 100 integration blocks