Pilot
RN-universal Card pilot
ScaffoldedCard composition — Card + CardHeader + CardTitle + CardDescription + CardContent + CardFooter — authored against RN View / Text so the same source ships to web, iOS, Android, macOS and Windows. The shadcn Card on the left uses div + h4; the RN Card on the right uses View + Text with accessibilityRole='header'.
Side-by-side: basic card
shadcn (DOM)
Project Aurora
Migration tracker for the TpLEARN assessments module.
46 of 62 assessments migrated · on track for April delivery.
RN (View / Text via RN Web)
Project Aurora
Migration tracker for the TpLEARN assessments module.
46 of 62 assessments migrated · on track for April delivery.
Semantics
| Slot | shadcn | RN | Notes |
|---|---|---|---|
| Card | <div> | <View> | Border, rounded corners, background via tokens |
| CardHeader | <div> (grid) | <View> (flex column) | RN does not support container queries; flex column is sufficient for a pilot |
| CardTitle | <h4> | <Text accessibilityRole="header"> | RN Web translates to <h4> role="heading" on web; native readers announce as header |
| CardDescription | <p> | <Text> | Muted-foreground token for secondary copy |
| CardContent | <div> | <View> | Standard padding; body content slot |
| CardFooter | <div> (flex row) | <View> (flex row) | Action buttons, metadata, etc. |
| CardAction | <div> (grid-positioned) | <View> (margin-start: auto) | Shadcn uses grid-col-start; RN uses ml-auto for parity |