shadcn.io is not affiliated with official shadcn/ui
Learning Program Budget About Block for React
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.
Installation
Overview
A learning budget for React with Base 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.
Related
- Pro
Sortable Skills Matrix About
Team and officesA framed matrix of seven skills by five departments for a learning platform, each cell four dots, sortable by skill or department, with computed department averages in the footer row.
- Pro
An onboarding process section for an HR company's own about page: a live checklist for the first 30 days, grouped by week, with a running count and bar, a tip from your buddy for each week, and ticks that stay on this page for this visit.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
Mission Pillars About
StatementsA mission held up by four pillars for a civic-software company: cells that share their hairlines, each with its numeral, a sentence, three initiatives with shipped and in-progress marks, and a progress bar counted from the list.
- Pro
Day Track Hiring Process
CareersA hiring process section for an applicant tracking company's own about page: five stages drawn to scale over fourteen days, five cells saying what to expect at each, and a promise to reply within two days.
- Pro
Vertical Steps Journey
Principles and processA customer journey section for a CRM: the first 90 days as a vertical stepper with the catalog Steps, each stage with its timing, its hands-on time and its key action, and a line that says which stage you are in.