Phase 9b · Tier A

RN-universal ScrollArea pilot

Scaffolded

Thin wrapper over RN ScrollView. On the web it renders a scrollable div with the platform's native scrollbar; on native it is a real ScrollView. By design, no custom scrollbar — calm-design defaults match the OS.

Side-by-side: vertical list

shadcn (Radix)
  • Applicant #1000Submitted
  • Applicant #1001In review
  • Applicant #1002Pending docs
  • Applicant #1003Submitted
  • Applicant #1004In review
  • Applicant #1005Pending docs
  • Applicant #1006Submitted
  • Applicant #1007In review
  • Applicant #1008Pending docs
  • Applicant #1009Submitted
  • Applicant #1010In review
  • Applicant #1011Pending docs
  • Applicant #1012Submitted
  • Applicant #1013In review
  • Applicant #1014Pending docs
  • Applicant #1015Submitted
  • Applicant #1016In review
  • Applicant #1017Pending docs
  • Applicant #1018Submitted
  • Applicant #1019In review
RN
  • Applicant #1000Submitted
  • Applicant #1001In review
  • Applicant #1002Pending docs
  • Applicant #1003Submitted
  • Applicant #1004In review
  • Applicant #1005Pending docs
  • Applicant #1006Submitted
  • Applicant #1007In review
  • Applicant #1008Pending docs
  • Applicant #1009Submitted
  • Applicant #1010In review
  • Applicant #1011Pending docs
  • Applicant #1012Submitted
  • Applicant #1013In review
  • Applicant #1014Pending docs
  • Applicant #1015Submitted
  • Applicant #1016In review
  • Applicant #1017Pending docs
  • Applicant #1018Submitted
  • Applicant #1019In review

Note the scrollbar styling difference: shadcn paints a Radix-managed thin rail; RN defers to the platform's native scrollbar. Custom scrollbar styling on web is opt-in via the data-rn-scroll-area attribute.

Horizontal orientation

Applicant #1000
Submitted
Applicant #1001
In review
Applicant #1002
Pending docs
Applicant #1003
Submitted
Applicant #1004
In review
Applicant #1005
Pending docs
Applicant #1006
Submitted
Applicant #1007
In review
Applicant #1008
Pending docs
Applicant #1009
Submitted
Applicant #1010
In review
Applicant #1011
Pending docs

Semantics

AspectshadcnRNNotes
ImplementationRadix ScrollAreaRN ScrollViewWrapped <View> root for hooks/styling
Custom scrollbarYes (Radix-managed)NoNative scrollbar; opt-in via data attr
Orientationvertical / horizontalvertical / horizontalhorizontal=true on the underlying ScrollView
hideIndicatorAlways showsshowsScrollIndicator=falseNative indicator hidden when set
Native parityWeb onlyiOS/Android/macOS via RNSame primitive everywhere