shadcn.io is an independent project built on shadcn/ui
Installation
Overview
A team section for React with Ark UI, for Barrowby, a farm-lease marketplace. Four bands, one for each department (Engineering, Design, Support and Sales), run from rail to rail. Each band names its department and its headcount in a badge at the start and, behind a solid divider that meets the band's rule at a plus mark, gives one quote at display size from someone in it with their initials avatar, name and role small under it. On a phone the name sits above the quote. The last band ends the block. It's built from Avatar, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. The people and quotes are examples.
FAQ
How do I change the departments and the quotes?
Edit DEPARTMENTS at the top of the file: a name, a headcount, a quote and the speaker with their speakerRole. The total in the heading is added up from the headcounts. Keep a quote to one or two sentences, since it is set at display size.
How is it marked up?
A list of four items, each with the department in an h3 and the quote in a figure with a blockquote and a figcaption. The headcount badge is read as "18 people".
How are the lines drawn, and how does the block end?
Each band draws its own top rule, and the quote cell draws the divider with a plus where it meets the rule. The last band has no bottom rule, so the next block's top rule closes the wall.
How does it fit on a phone?
Below md each band is one column: the department and its badge, then the quote, then the speaker. All four are shown; nothing is collapsed.
