ns-ui
A team grid that answers the question a team grid is actually asked — who is reachable right now — by running a 24-hour UTC rail above the cards with the team's shared working-hours overlap inked into it, while each card shows that person's live local time and dims when they're outside their own hours.
Use when Pick team-grid-timezone-rail for an about/team section that has to stay honest about reachability — live local clocks per person, cards dimmed outside their own hours, and one inked UTC run showing when the whole team overlaps. schedule-ascii-freebusy is the better pick when the input is real per-slot busy/free calendar data and the output is a bookable meeting window; this one needs nothing but each person's UTC offset.
Install
npx shadcn add https://design.helpmarq.comns-ui / team-grid-timezone-rail
all 6 + you free 13:00–17:00 UTC · 4h shared
Six people, six timezones. The inked run on the UTC rail is the only window in which everyone is inside their own working hours at once — four hours, 13:00 to 17:00 UTC. Hover one person and the rail opens out to the hours just you two share; press to pin it.
| Prop | Type | Default | Description |
|---|---|---|---|
| members? | TeamMember[] | — | — |
| workingHours? | [number, number] | — | local working window as [startHour, endHour), applied to everyone |
| viewerOffset? | number | — | the viewer's own offset; defaults to the browser's, resolved after mount |
| className? | string | — | — |