Skip to content

Usage Bar

Shows how a whole is shared out — storage, a data plan, a quota — as one row of segments sized by their value, with a legend, an axis and a highlighted segment that a list beside it can follow.

Usage Bar
Spent in October

$2,480 of $3,200

Rent$1,200
Groceries$520
Eating out$360
Transport$260
Subscriptions$140
Left$720

Installation

pnpm dlx shadcn@latest add @sortui/usage-bar

Usage

import {
  UsageBar,
  UsageBarHeader,
  UsageBarTrack,
  UsageBarSegment,
  UsageBarLegend,
  UsageBarLegendItem,
  UsageBarAxis,
} from "@/components/ui/usage-bar"

Examples

With a list

Used
Left

5.6 GB left of 20 GB

Streaming

Video and music, mostly on the go

6.2 GB
Social

Feeds, stories and short video

3.8 GB
App updates

Downloaded over cellular

2.4 GB
Maps

Navigation and offline areas

1.1 GB
Messaging

Photos and voice notes

0.9 GB

Variants and an axis

Database storageHover a segment
Data
Can be pruned
Free
Reserved

Striped

Photo backup46 GB uploading · about 2 h left
Backed up
Uploading
In queue
Free

With tooltips

Phone storage103 of 128 GB used

Sleep

Sleep
Last night, 11:12 PM to 7:08 AM
7h41m
Deep
2h 14m
REM
1h 50m
Light
3h 37m
Awake
15m
Smart alarmWakes you in a light stage before 7:30 AM
Wake window30 min

Ship your next project this week

Get the full Figma kit, the code of 180+ sections and every future update for one payment.

Get Pro Access