shadcn.io is not affiliated with official shadcn/ui
Sortable Customer Advisory Council About Block for React
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 Base 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 render with nativeButton={false}.
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.
Related
- Pro
Advisory Board About
Team and leadersAn advisory board for a legal-software company: five advisors in an accordion, each with the practices they cover, why they advise, and one piece of advice.
- Pro
Sortable Skills Matrix About
Team and officesA framed matrix of seven skills by five departments for a learning platform, each cell four dots, sortable by skill or department, with computed department averages in the footer row.
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
Guestbook Customer Wall
CustomersA customer wall as a guestbook: five dated notes from shop owners, newest first, beside a framed form that adds your note to the top of the list for this visit.
- Pro
Sortable Directory Team
Lists and directoriesA document-signing company's ten people in a table whose cells share their hairlines, sorted by name, department or tenure from the header, with a tenure bar and a live sort announcement.
- Pro
Community channels About
Support and contactA community close for a developer community: three channels with member counts beside four recent activity lines, and a join link.