shadcn.io is not affiliated with official shadcn/ui
Connector Map Awards Block for Ark UI
A reverse split for a spend-analytics tool: a framed map with four awards in a column at the start, the result each recognised at the end and hairline curves joining each pair, drawn bolder for the award you choose.
Installation
Overview
A connector map for React with Ark UI. The map comes first from lg, in a framed card with a + mark on each corner: four awards stand in a column at the start, each with a small drawn rosette, its name, the programme and the year, and the result each recognised stands in a column at the end ("Month-end close, 4 days, down 64%"). The results are ordered by the size of their change, so the hairline curves that join each pair, drawn in SVG, cross. Choose an award and its curve is drawn in full and its result is ringed, while a polite line under the header says which two are joined. At the end of the split a header explains how to read it; on a phone the curves are gone and each award sits above its result. It's built from Guides, a native radio group, inline SVG and your theme's tokens. The awards and the figures are made up for the example.
FAQ
How do I change the pairs?
Edit PAIRS at the top of the file: each pair has an award name, its programme and fixed year, the outcome it is joined to, the before and after figures and the unit. Awards stay in the order you give them and the results are sorted by the size of their change, so the curves are worked out for you. If you add a pair, add its row classes to AWARD_ROWS and OUTCOME_ROWS and raise the number of rows the map reserves.
How are the curves drawn?
One SVG with preserveAspectRatio="none" sits behind the middle column. Each curve starts at the middle of an award's row and ends at the middle of its result's row, as a cubic Bézier computed from the row height and gap, so it follows the layout. The strokes keep their width at any size, and in a right-to-left layout the drawing is mirrored so the curves still start at the awards.
How do I choose an award with the keyboard?
The awards are a native radio group named "Choose an award to follow it to its result". Tab moves into the group, and the arrow keys move through it and choose as they go; the focus ring shows on the award's cell. Choosing changes only the drawing and the status line: nothing is submitted or saved.
What happens on a phone?
The curves need two columns, so below lg they are hidden and each pair becomes a short stack: the award, then its result, with the result labelled for screen readers. The radio group still works, and the chosen pair is ringed. Nothing scrolls sideways at 320 pixels.