Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Advisory Board Table Team Block for Radix UI

Seven advisors of a climate-risk model company in a captioned table from rail to rail: an initials avatar and a name, their role and firm, their specialty and the year they began advising.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An advisory board for React with Radix UI, for Aldersey, a climate-risk model. A centred header says what the advisors do, and under a hairline band with + marks a table runs from rail to rail and ends the block. Each of its seven rows is an advisor: an initials avatar and a name, their role and firm (every firm is invented), their specialty and "Year 1", "Year 2" or "Year 3" for when they began advising. On a phone the role, firm and specialty fold under the name and the table keeps two columns, the advisor and the year, so nothing scrolls. It's built from Table, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For companies that sell trust in a model, a standard or a method and want to show who checks it.

FAQ

How do I change the advisors?

Edit ADVISORS at the top of the file. An advisor is a name, a role, a firm, a specialty and since, the number of the year they began (1, 2 or 3). The avatar's initials and one of three greyscale tones come from the name and the person's place in the list. Every name and firm here is invented; replace them with your own and keep the specialty to a few words.

Why does it say Year 2 and not a calendar year?

A calendar year goes stale the day after the page ships. "Year 1" is the year your company began, so the table stays true until you add someone, and the caption says so. If you would rather show a date, change the cell and the caption together.

Is it a real table, and how do assistive technologies read it?

It is a native table with a caption and column headers, so a screen reader announces "Advisor", "Role and firm", "Specialty" and "Advising since" as you move across a row.

On a phone the two hidden columns are removed from the page, not just from view, and their text appears once, under the name, so nothing is read twice.

How does it fit on a phone?

Below md the Role and firm and Specialty columns disappear and the same text folds under each advisor's name, in two short lines. The advisor and the year remain as columns, so the table needs no sideways scroll at 320 pixels.

How are the lines drawn, and how does the block end?

Guides draws the top rule with its + marks; each row draws a bottom border, except the last, and the caption sits under it with the block's padding, so the next block's top rule closes the block and no line is ever doubled.

All 126 team blocks