shadcn.io is not affiliated with official shadcn/ui
Leadership Remit Rows About Block for Ark UI
A leadership section for an OKR company, with six remit rows that name what each person owns, two topics to ask them about, and when they joined.
Installation
Overview
A remit list for React with Ark UI, written for Steerwell, a fictional OKR tool that runs the company on one. A compact header sits over six rows from rail to rail: initials, the name and the role, the outcome they own, two topics to ask them about, and when they joined, counted from the company ("Year 1"). The rows end the block, so the next section's rule is their foot. On a phone a row stacks and the topics sit under the remit. It's built from Avatar, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should say who owns each outcome. The people and the remits are example data.
FAQ
How do I change the leaders?
Edit LEADERS at the top of the file. Each has a name, a role, an owns line, two topics and a since label such as "Year 2". The initials are derived from the name. Add or remove rows freely: the list and its last row are drawn from the array, and the heading's count is the length.
How is it read by a screen reader?
The section has one h2. Each name is an h3. The initials avatar is decorative, because the name is written beside it. "Owns" introduces the outcome. The topics are a list labelled "Ask" plus the person's name. The join label is text. The rails are hidden from assistive technology.
How does it fit on a phone?
Each row stacks: the person, what they own, the words "Ask them about" with the chips under them, then when they joined. On a large screen those words stay available to a screen reader and the chips sit in their own column. Nothing scrolls sideways at 320 pixels.
What does the join label mean?
"Year 1" is the company's first year, and later labels count from there. Keep since in that form so the page does not go stale.