- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
These are real compositions from the PEx apps, rebuilt from the library's primitives. Use them as a reference for assembling whole views — not just isolated components.
Group hero card (Bridge)
The header card on a group's detail page in Bridge — avatar, location/status badges, key details, and quick actions (edit, capture attendance, QR code, archive).
Tuesday Recovery Group
- Specialisation
- Substance use
- Format
- In person
- Location
- Cape Town
- Next Group
- Tuesday, 8 Jul 2025 · 18:00–19:30
Source: apps/bridge/app/(app)/groups/[id]/_components/group-hero-card.tsx
Programme hero card (Bridge)
The header card on a programme's detail page — a coloured avatar, schedule, the order/edit/archive actions, a key-details grid, and a link through to the lead facilitator.
Exodus Recovery Skills
Wednesdays · 18:00–20:00
- Format
- In person
- Access
- Closed
- Schedule
- Wednesdays · 18:00–20:00
- Location
- Cape Town
Thabo Nkosi
Source: apps/bridge/app/(app)/programmes/[id]/_components/programme-hero-card.tsx
Member activation card (Bridge)
Bridge surfaces unpaid programme members here so a facilitator can activate them — and see sponsorship status — at a glance. The amber treatment flags it as an action the facilitator still needs to take.
R3,750
R1,500
Lerato Mokoena
lerato@example.com
R750
James Carter
james@example.com
Sponsorship requested at R750
R0
Nadia Patel
nadia@example.com
Sponsorship approved at R1,500
Requested sponsorships may take some time to be approved. The full member cost of the programme will apply until the request has been reviewed.
Source: apps/bridge/app/(app)/programmes/[id]/_components/member-activation-card.tsx