checkpoints.ds

Search the design system

Jump to a page or component

AUDIT

Platform parity

Checkpoints ships a Next.js web app and an Expo mobile app against one shared package. Mobile is behind, and closing that gap is active work — so the gap itself is tracked here rather than described in a doc that goes stale.

COVERAGE
38%

Implemented on both

BOTH PLATFORMS
20
WEB ONLY
26

Missing on mobile

MOBILE ONLY
6

Missing on web

Highest-impact gaps

Web-only components ranked by how many web files import them. A component used in 40 places on web is a bigger mobile hole than one used twice.

braille-spinner45 web imports
page-header22 web imports
pixel-icon17 web imports
back-button16 web imports
typewriter9 web imports
journey-icon6 web imports
drawer4 web imports

Variant drift

Components that exist on both platforms but don't expose the same options. This is the parity gap that's easiest to miss — the import resolves, the types pass, and the mobile screen quietly can't render the variant the design calls for.

tabs
variant
defaultline

Full matrix

Every component, both platforms. Mobile-only rows are just as interesting as web-only ones — they're usually platform primitives (bottom sheets, tab bars) with no web equivalent, but sometimes they're divergence.

COMPONENTSTATUSWEBMOBILEWEB IMPORTSMOBILE IMPORTS
IconSymbolMOBILE ONLYWeb: NOMobile: YES00
TabBarBackgroundMOBILE ONLYWeb: NOMobile: YES01
alert-dialogWEB ONLYWeb: YESMobile: NO20
animated-sparkleWEB ONLYWeb: YESMobile: NO20
app-tabsWEB ONLYWeb: YESMobile: NO00
avatarBOTHWeb: YESMobile: YES04
back-buttonWEB ONLYWeb: YESMobile: NO160
badgeBOTHWeb: YESMobile: YES119
bottom-sheetMOBILE ONLYWeb: NOMobile: YES016
braille-spinnerWEB ONLYWeb: YESMobile: NO450
buttonBOTHWeb: YESMobile: YES8628
cardBOTHWeb: YESMobile: YES00
chartWEB ONLYWeb: YESMobile: NO10
commandWEB ONLYWeb: YESMobile: NO10
dialogBOTHWeb: YESMobile: YES448
drawerWEB ONLYWeb: YESMobile: NO40
dropdown-menuWEB ONLYWeb: YESMobile: NO30
filter-chipsBOTHWeb: YESMobile: YES95
form-fieldMOBILE ONLYWeb: NOMobile: YES03
fullscreen-modalBOTHWeb: YESMobile: YES74
hours-inputWEB ONLYWeb: YESMobile: NO20
inputBOTHWeb: YESMobile: YES278
journey-iconWEB ONLYWeb: YESMobile: NO60
labelBOTHWeb: YESMobile: YES201
logo-markBOTHWeb: YESMobile: YES21
mobile-notifications-bellWEB ONLYWeb: YESMobile: NO40
notched-cardBOTHWeb: YESMobile: YES43
onboarding-progressWEB ONLYWeb: YESMobile: NO10
page-headerWEB ONLYWeb: YESMobile: NO220
pixel-iconWEB ONLYWeb: YESMobile: NO170
popoverWEB ONLYWeb: YESMobile: NO10
scroll-rowWEB ONLYWeb: YESMobile: NO30
section-cardBOTHWeb: YESMobile: YES93
section-tabsWEB ONLYWeb: YESMobile: NO30
selectBOTHWeb: YESMobile: YES11
separatorBOTHWeb: YESMobile: YES30
skeletonBOTHWeb: YESMobile: YES51
sonnerWEB ONLYWeb: YESMobile: NO10
sparkle-filledWEB ONLYWeb: YESMobile: NO30
stepperWEB ONLYWeb: YESMobile: NO20
switchBOTHWeb: YESMobile: YES123
tableWEB ONLYWeb: YESMobile: NO10
tabsBOTHWeb: YESMobile: YES51
terminal-boot-linesWEB ONLYWeb: YESMobile: NO10
textMOBILE ONLYWeb: NOMobile: YES0113
textareaBOTHWeb: YESMobile: YES134
themed-inputWEB ONLYWeb: YESMobile: NO10
toastMOBILE ONLYWeb: NOMobile: YES01
toggleBOTHWeb: YESMobile: YES11
toggle-groupBOTHWeb: YESMobile: YES12
tooltipWEB ONLYWeb: YESMobile: NO10
typewriterWEB ONLYWeb: YESMobile: NO90

What this measures — and what it doesn't

Worth stating plainly, because a coverage number invites over-reading.

  • It compares module presence, not visual fidelity. A component present on both platforms can still look wrong on one of them.
  • It compares CVA variant options, which catches API drift but not styling drift inside a shared variant name.
  • 6 mobile-only components are counted against coverage even though most are platform primitives with no meaningful web equivalent. The honest number is somewhere above 38%.
  • Visual comparison is the missing half. Live mobile rendering via react-native-web is the next step — every preview on this site already has the mobile tab stubbed in.