shadcn.io is not affiliated with official shadcn/ui
Architect Performance Targets Profile Block for Ark UI
An architect profile as performance targets: tabs for three projects, each with energy, carbon and daylight targets drawn as bars with a tick, the figure reached, and Meets or Misses in words with a glyph, beside a rating worked out from the targets met.
Installation
Overview
Show what a building aimed for and where it landed, with this architect performance profile for React with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the architect: initials, name, role and place. Tabs choose one of three projects. Each project is three cells on shared hairlines, one per target: energy use, embodied carbon and daylight. A cell names what the figure counts in words, gives the figure reached beside its target, draws a bar with a tick at the target, with the part that goes past it, or falls short of it, hatched, and says the verdict in words with a check or an arrow: "Meets, 6 under target" or "Misses by 8". Under the cells a Data List gives the floor area, status, year and whether the figures were measured or modelled, beside an outline Badge with the project's rating in an invented scheme, worked out from how many of the three targets were met. A polite line under the panel says the result when you change project. Meeting a target is told by the word, the glyph and the hatching, never by a colour. It's built from Tabs, Data List, Badge, Avatar and Guides, with a CSS entrance only. The architect and her projects are invented. For an architecture network, a practice's page or any profile that reports against a brief.
FAQ
How do I fill it with my projects and targets?
Edit METRICS (each target's name, what it counts, the scale's end and whether a bigger figure is the better one) and PROJECTS (name, brief, floor area, status, year, whether the figures are measured or modelled, and a target and an actual for every metric). Whether a target is met, by how much, the bars, the count of targets met and the rating level are all worked out from those numbers, so nothing is typed twice.
How are the bars read?
The tick is the target. For a figure that should stay low, such as energy use, the bar is solid up to the target and hatched beyond it when the figure is higher. For a figure that should stay high, such as daylight, the bar is solid up to the figure and hatched up to the target when the figure falls short. The words under the bar say the same thing, and the bar itself is hidden from assistive technology.
What is the Sedgemark rating?
An invented scheme for the example: all three targets met is Gold, two is Silver, one is Bronze. It is worked out from the data and the cell under the list says the rule. Replace it with your own certification, or remove it, and keep the count of targets met, which is the part the data proves.
What stays local in the demo?
Everything. There is no building, no measurement and no certifying body behind the figures, which are typed examples, and the tabs only change what is shown. In your app load the targets and the results for each project from your own records, and show the basis, measured or modelled, as the example does so a modelled figure is never read as a measured one.
Is it accessible?
The tabs are named by the project and keep the usual arrow-key behaviour. Each target is a list item whose text carries the whole result: its name, the unit in words, the figure, the target and the verdict. A check or an arrow sits beside the verdict, never alone. The status line is a polite live region present from the start.