Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Learning Program Budget About Block for Radix UI

A learning-budget table for a learning platform, where the headline is the sum of each program's spend per person and a bar shows the share of the team that joined.

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

A learning budget for React with Radix UI, written for Skillhurst, a fictional learning platform showing what it spends on its own team. The headline figure is the annual budget per person, the sum of the program rows, never a number typed beside them. The table lists each program, the dollars per person, the hours expected and the share of the team that joined, with a bar under that share. The page's rails and top rule come from the Guides spine, a divider splits the headline from the table, and corner marks frame the table. It's built from Table, Progress and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page or a careers page that should publish a learning budget as a table, not as four cards. The programs and the figures are example data.

FAQ

How do I change the programs?

The programs are PROGRAMS at the top of the file. Each has an id, a name, a budget in dollars per person, hours and joined, a share from 0 to 100. The headline is the sum of the budgets, formatted as dollars. Add or remove rows and the headline, the column count in the sentence and the table all follow.

Is the bar announced?

No. The sentence "Joined by N% of the team" is the text, and the bar repeats it for sight. The bar is hidden from assistive technology on every library, including where the progress element still carries a label for its own component.

How does the table work for a keyboard?

The table scrolls sideways inside a labelled region that a keyboard can focus. It is a native table. The program name is a row header, and a visually hidden caption explains the columns.

How is the headline figure worked out?

It is the sum of every program's budget, formatted as US dollars with no cents. A program's own cell uses the same formatter, so the headline cannot disagree with the column.

How does it fit on a phone?

The headline stacks above the table, with a rule between them. The table scrolls sideways and keeps its four columns, rather than stacking each program into a card. Dollar amounts stay in Latin order in a right-to-left layout.

What moves, and what happens with reduced motion?

The headline and the table fade up once on load. The bars do not animate. With reduced motion the entrance is off. Nothing loops and nothing plays on its own.

All 150 about blocks