Component Library

This style guide showcases all UI components used in the NRMP Couples Match Tool. All components are built with shadcn/ui, Next.js, TypeScript, and Tailwind CSS, featuring Nunito and Quicksand fonts for a modern, playful aesthetic.

Typography Alerts Cards Buttons Items Dropdowns Input Groups Other

Typography

Text styles and hierarchies using Nunito and Quicksand for a modern, playful aesthetic

Title

NRMP Couples Match Tool

Headers

Heading 1 - Large Header

Heading 2 - Section Header

Heading 3 - Subsection Header

Body Text

Normal text: This is the standard paragraph text used throughout the application. It uses Nunito for a modern, friendly, and highly readable appearance.

Bold text: Important information and emphasis

Italic text: Subtle emphasis and notes

Links

Standard link with hover effect

NRMP Code Style

1234567890

Small gray text for secondary information

Alerts

System notifications and user feedback messages

Success

Your rank list has been successfully saved and is ready for submission.

Information

The NRMP couples match allows up to 300 program pairs in your rank order list.

Warning

Some program pairs exceed the maximum acceptable travel time threshold of 8 hours.

Error

Failed to calculate travel times. Please check your API key configuration.

Cards

Interactive card components with hover states

DescriptionCard (HoverCard Component)

Multiple Description Cards

Buttons

Various button styles and interactive elements

Circle_Numbered_Colored_Button (Interactive)

Click to cycle through tiers: 1 (light gray) → 2 → 3 → 4 → 5 (darker gray)

Standard Buttons

Add to Partner Buttons (Side-by-side)

Checkbox_Button (Checkbox with Label)

Include "No Match" codes in rank list

Enable tier exhaustion algorithm

Auto-save changes

Button Sizes

Button Variants

List Items

Specialized card components for displaying program and address information

ProgramRankItem

Displays ranked program with tier indicator. Background color varies by specialty (vibrant palette).

Massachusetts General Hospital

Interventional Radiology Residency

(NRMP: 1404120C0)

Tier

Johns Hopkins Hospital

Diagnostic Radiology Residency

(NRMP: 1416120C0)

Tier

Stanford Health Care

General Surgery Residency

(NRMP: 1044120C0)

Tier

ProgramAddressItem

Displays institution address with edit capability for travel time adjustments.

Massachusetts General Hospital

55 Fruit Street

Boston, MA

Johns Hopkins Hospital

1800 Orleans Street

Baltimore, MD

ProgramInputItem

Program card for input selection (no rank, no tier, removable with X button).

Massachusetts General Hospital

Interventional Radiology Residency

(NRMP: 1404120C0)

PartnerProgramItem

Read-only program card for displaying programs in a ranked pair (no rank number, no tier, no remove button).

Massachusetts General Hospital

Interventional Radiology Residency

(NRMP: 1404120C0)

Johns Hopkins Hospital

Diagnostic Radiology Residency

(NRMP: 1416120C0)

ProgramPairRankList

Displays a ranked program pair with both partners' programs side-by-side. Hover over the info icon to see detailed preference points and commute time breakdown.

Massachusetts General Hospital

Interventional Radiology Residency

(NRMP: 1404120C0)

Johns Hopkins Hospital

Diagnostic Radiology Residency

(NRMP: 1416120C0)

Stanford Health Care

General Surgery Residency

(NRMP: 1044120C0)

UCSF Medical Center

Internal Medicine Residency

(NRMP: 1067140C0)

InstitutionsTravelTimeItem

Horizontal layout displaying two institutions with editable travel time and detailed breakdown. Click the travel time to edit, or click the navigation icon for detailed travel times.

Massachusetts General Hospital

55 Fruit Street

Boston, MA

Johns Hopkins Hospital

1800 Orleans Street

Baltimore, MD

travel time

Stanford Health Care

300 Pasteur Drive

Stanford, CA

UCSF Medical Center

505 Parnassus Avenue

San Francisco, CA

travel time

Dropdowns

Various dropdown and selection components

SpecialtyCombobox (Multi-select with color-coded tags)

SearchFilterProgramDropdown

Searches by name, institution, city, state, or NRMP code - keyboard navigable (↑↓ arrow keys, Enter to select)

ClickMultipleSelectDropdown (Program Types - stays open)

Input Groups

Complex form components combining multiple inputs

NrmpCodeInputButton (Dialog Popup)

RankListInputField

Specialty

Program Type

Search Programs

Configuration_Input_Field (Two-column layout)

Match Settings

Changes auto-save

Priority Partner

Partner A's preferred max commute time

minutes

Partner B's preferred max commute time

minutes

What amount of time are you both willing to commute to each other most weekends?

min

What is the most you are willing to travel to visit your partner?

min

How much time beyond the close threshold (60 min) would you two be willing to commute to match a program one rank higher?

minutes

Round all travel times to the nearest

minute(s).

Do you two want to be happy in your programs or would you prefer to be together?

Tier Ranking

Rank all Tier 1 pairs before ranking any Tier 2 programs.

Rank all Tier 1 & 2 pairs before ranking any Tier 3 programs.

Rank all Tier 1-3 pairs before ranking any Tier 4 programs.

Include pairs where Partner A does not match

Include pairs where Partner B does not match

No Match Arrangement

Maximum Ranks

Other Components

Additional UI elements including dialogs, navigation, and pagination

Dialog_box

Modal dialog for displaying information

Simple_Header

Simple header with title on left and menu items on right

NRMP Couples Match

ConfigOptionsDropdown

Configuration settings popover with partner priority, max ranks, and travel thresholds

SectionNavigator

Vertical navigation with numbered circles (1 navigates to top, 4 to bottom)

ThemeToggle

Pill-shaped theme toggle with smooth transitions and orbital icon animations

Click to switch between light and dark modes

Component Features

Pill-shaped sliding indicator
300ms smooth transitions
Orbital icon animations (rotate + fade)
Hover glow effect and scale micro-interactions
SSR-safe hydration handling
Full keyboard accessibility
Persists preference to localStorage via next-themes

<ThemeToggle />

Built with shadcn/ui • Next.js • Tailwind CSS