shadcn.io is not affiliated with official shadcn/ui
Benefits Enrollment Cost Success Block for Ark UI
A confirmation page for chosen benefits: a ledger of three plans with who each covers, what the employer pays and what you pay each pay period, and a twelve-week strip from today to the day cover starts with the enrolment deadline marked.
Installation
Overview
Show people exactly what their choices cost, and when they take effect, with this confirmation page for React with Ark UI. It's the page Roothearth, a benefits portal, shows once a year's benefits are chosen: the page's side rails and one band, cut into three cells by shared hairlines. The first cell is a check in a tile, the heading, a short list with the confirmation code and a Copy Button, the one Shine Button, Back to benefits, and a Download Trigger styled as an outline Button that saves the summary as a text file. The second is a ledger, a native Table of the three plans with who each covers as Avatars with initials, what the employer pays and what you pay each pay period, with the totals. The third is twelve weeks as a strip of cells, from this week to the week the cover starts, with the day enrolment closes and the day cover starts marked in words. The frame's lines are drawn by Guides. For benefits and payroll portals, enrolment confirmations and any choice with a price per period.
FAQ
What stays in the page, and how do I wire it for real?
Nobody was enrolled. The three plans, the people and their prices are typed sample data, and the download is a small sample file, named so, with a polite status line to say it was saved. To wire it, build PLANS from the elections your benefits system returns (each with its yearly premium in cents and the employer's share in basis points), set AS_OF, CLOSES and STARTS from the plan year and send the summary from your own export.
Where do the amounts come from?
From the premium and the share. Each plan's yearly premium is split by the employer's share in basis points (8,000 is 80%), then divided by the 24 pay periods a year and rounded to a whole cent, and the totals are sums of those rows, so the table, the heading's sentence and the downloaded file always say the same amounts. Everything is in integer cents until it is written out.
How is the strip of weeks built, and is it readable without color?
It is an ordered list of twelve cells, one per week, in left-to-right order whatever the page's direction. Each starts on a Monday counted from the week of the typed AS_OF, and the cell holding the deadline and the cell holding the start day carry the words "Closes" and "Starts"; a screen reader hears the same after each date. Shading only repeats the words: the weeks in which changes are still allowed are shaded and the deadline's cell has a heavier edge, and the first day of cover is a solid cell.
How is the ledger built?
It's a native table on every base with a caption for assistive technology, column headings and each plan's name as a row heading, inside a scrollable named region. The people a plan covers are initials in a list with their full names hidden for sighted readers.
Do the copy and download buttons really work?
Yes, both use what the browser offers. The Copy Button writes the confirmation code to the clipboard and a screen reader hears "Confirmation code copied" (or that the clipboard refused, which happens on a page not served over HTTPS); the Download Trigger builds a small text file from the typed plans and saves it.
How does it look on a phone?
The cells stack in reading order: the message first, with the primary and the download beside it (the download shrinks to an icon button named Download summary), so the primary is on the first screen, then the ledger, then the weeks in two rows of six. The ledger drops its employer column and its visible column headings (both stay for screen readers), and each plan's employer share moves beside who it covers.