shadcn.io is not affiliated with official shadcn/ui
Cohort Slider Team Block for React
Forty-three people of a payroll service by the year they joined: a slider labelled The year you joined, a group of avatars for who came that year, and two quotes from that year in cells split by a hairline.
Installation
Overview
A team section for React with Base UI, for Pennock & Co, a payroll service. A centred header sits over a band with a slider labelled The year you joined, from Year 1 to Year 6, with a button under each year, and a group of avatars with a line saying how many people joined that year. Under the band two cells, split by a hairline from md, each hold a short thing someone from that year says about the company. Every year's pair of quotes is also drawn unseen in the same place, so moving the slider never moves the page. On a phone the buttons show only the number and the two quotes stack. It's built from Slider, Avatar, Button and Guides, with CSS transitions and your theme's tokens for every colour. The people and counts are example data.
FAQ
How do I change the years and the people?
Edit COHORTS at the top of the file: a year, how many people joined, the people the avatars show (the first two are the voices) and two voices, each with a name, a role and a short text. The slider's range and the buttons come from the array's length; the avatar group shows four and a count for the rest.
How do I use it with a keyboard?
Tab goes to the slider's thumb: the arrow keys move a year at a time, and Home and End jump to Year 1 and Year 6. The thumb says "Year 3", not a bare number, and a polite line reads out how many people joined. The year buttons under the slider are real buttons that report which year is chosen.
Does the block move as I slide?
No. The pair of quotes for every year is drawn a second time, unseen and hidden from assistive technology, in the same cell, so the cell holds the tallest pair. The avatar group and the count line have fixed widths, so nothing beside them moves.
Do all seven targets behave the same?
Yes. The thumb is drawn in the foreground colour on every target. The thumb stays inside the track, so the year buttons are inset by half its width to sit under it.
Related
- Pro
Stories Viewer Team
Carousels and reelsFive teammates of a crop-planning app as a stories viewer: five segments that fill in turn, one sentence at a time in large type, a visible Pause, Previous and Next buttons, arrow keys and swipe.
- Pro
Department Quote Wall Team
Culture and valuesFour departments of a farm-lease marketplace as bands: each names its department and headcount at the start and gives one display quote from someone in it at the end, split by a solid divider.
- Pro
Lens Roster Team
Culture and valuesSix people of a pension app in rows rail to rail, with a Why I joined or Why I stay picker that swaps every row's one-line answer at once while names, roles and tenures stay put.
- Pro
Animated Comparison Team
Numbers and historyA Then / Now toggle on a framed figure: Then fills four places with the founders, Now fills eleven and a +13, with a line of words and three figures that change with it.
- Pro
Contract Length Slider Pricing
Billing switchesA split pricing section for a VPN with a contract length slider from 1 to 24 months in a card in a card, where the monthly price at display size, the discount, total and savings roll to each term, and a sticky bar on phones.
- Pro
Quarterly Year Review Testimonials
Results and figuresA year in four quarters for a deploy platform, in a card in card: a Q1 to Q4 bar filled up to the chosen quarter, and under it that quarter's quote beside its deploys and uptime.