shadcn.io is not affiliated with official shadcn/ui
Sortable Customer Advisory Council About Block for Radix UI
A framed, sortable table of a product-feedback tool's seven-member customer council, with expertise badges, the year each member joined and an apply band with a Shine Button.
Installation
Overview
A customer advisory council section for React with Radix UI, written for Councilly, a fictional product-feedback tool. A start header sits over one framed block: a table of the council's seven members, with the company, the role they hold there, their industry, two areas of expertise as outlined badges and the year of Councilly they joined ("Year 2", never a calendar year). Company, Industry and Member since are header buttons: press one to sort by it, press it again to reverse the order. The foot of the frame is an apply band with the page's one primary control, a Shine Button, and a line about the open seat. The company column stays put while the table scrolls sideways on a phone. It's built from Table, Badge, Shine Button and Guides, with CSS transitions and your theme's tokens for every colour. For an about page or a community page that invites customers to apply. The companies are invented.
FAQ
How do I change the members and the open seat?
Edit MEMBERS at the top: a company, a role, an industry, two expertise badges and the since year of the product. The band's text says how many seats are open; change it with the data. The companies are invented.
How does sorting work, and what is ascending for Member since?
A first press sorts from the start of the order, and pressing the same column again reverses it. Company and Industry run A to Z; Member since runs earliest first, so Year 1 comes before Year 4. Ties fall back to the company name. A polite line above the table reads the result, and the sorted header carries aria-sort and an arrow.
Each sortable header holds a real button inside its cell, and the table has a visually hidden caption.
Where does the apply button go, and how is it a link?
The Shine Button is a link to your application page; edit its href. It is the only primary control in the block, so the table and the badges stay in neutral tones.
It renders the link through asChild.
What happens on a phone?
The table scrolls sideways inside a labelled region that a keyboard can focus, with the company names pinned at the start. The apply band stacks, with the button under the text.