Name Roster
A column-flow alphabetical list of named items with a dot-prefix indicator and a highlighted-row variant.
Default (4-column)
A 1→2→3→4 responsive column roster using the columns breakpoint map and the items shorthand. Items are sorted alphabetically via sort="alpha".
- ANIMAL
- Blacklight
- Delta Airlines
- ENTR
- Fidelity
- JD Power
- Knowmentum
- Marriott
- QNCC
- SCRUFF
- Sked
- Verizon
- Veronica Home
- Visor
- Wells Fargo
- XPrize
With Highlighted Rows
The highlighted prop marks items as featured or owned. Highlighted rows use a different dot color and medium font weight — both driven by CSS custom properties so they adapt to any theme.
- ANIMAL
- Blacklight
- Delta Airlines
- Knowmentum
- SCRUFF
- Visor
Marketing Variant — Customization Slots
The roster exposes a per-component CSS variable surface. Override any of the --roster-* slots in a parent token-override scope (an inline style here for demo purposes) to rebuild a marketing-grade row without forking the component.
- ANIMAL
- Blacklight
- Delta Airlines
- Fidelity
- JD Power
- Knowmentum
- SCRUFF
- Verizon
- Visor
- XPrize
With Anchor Children
NameRosterItem accepts arbitrary children — link names to detail pages without losing the dot treatment.
Installation
npx visor add name-rosterThis copies two files into your project:
components/ui/name-roster/name-roster.tsx— the componentcomponents/ui/name-roster/name-roster.module.css— the styles
Usage
import { NameRoster, NameRosterItem } from '@/components/ui/name-roster/name-roster';
{/* Shorthand with items array */}
<NameRoster
columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
sort="alpha"
items={[
{ name: 'ANIMAL' },
{ name: 'Blacklight', highlighted: true },
{ name: 'SCRUFF' },
]}
/>
{/* Children mode — allows arbitrary nodes */}
<NameRoster columns={{ base: 1, md: 3 }}>
<NameRosterItem>SCRUFF</NameRosterItem>
<NameRosterItem highlighted>Visor</NameRosterItem>
</NameRoster>API Reference
NameRoster
No props data available for “name-roster”.
The component also accepts all standard <ul> / <ol> HTML attributes.
NameRosterItem
| Prop | Type | Default | Description |
|---|---|---|---|
highlighted | boolean | false | Render with highlighted dot color and medium weight. |
children | ReactNode | — | Item content — text, links, or any inline node. |
The component also accepts all standard <li> HTML attributes.
NameRosterItemData
Type used with the items shorthand prop:
interface NameRosterItemData {
name: string
highlighted?: boolean
}Customization Slots
The roster root (.roster) exposes the following CSS custom properties. Defaults resolve to the current visual output — override any of them in a parent token-override scope to retheme.
| Slot | Default | Purpose |
|---|---|---|
--roster-item-font-size | var(--font-size-sm) | Font size of each item |
--roster-item-font-weight | var(--font-weight-normal) | Font weight of non-highlighted items |
--roster-item-letter-spacing | normal | Letter spacing of each item |
--roster-item-line-height | var(--line-height-normal) | Line height of each item |
--roster-item-color | var(--text-primary) | Default text color |
--roster-item-color-hover | var(--text-secondary) | Text color on hover |
--roster-item-color-highlighted | var(--text-primary) | Text color for highlighted items |
--roster-item-font-weight-highlighted | var(--font-weight-medium) | Font weight for highlighted items |
--roster-item-hover-transform | none | Transform on hover (e.g. translateX(6px)) |
--roster-dot-size | 0.375rem | Diameter of the dot prefix |
--roster-dot-color | var(--surface-accent-strong) | Dot background color |
--roster-dot-color-hover | var(--roster-dot-color) | Dot color on hover; defaults to no change |
--roster-dot-color-highlighted | var(--surface-accent-default) | Dot color for highlighted items |
--roster-dot-glow-hover | none | Optional box-shadow ring on the dot when hovered |