The ComponentRegistry

Balanced teal-and-orange palette with full sidebar token support.

Cool-toned variant of the teal-orange palette with a dark sidebar.

Warm editorial theme for Visitza's public-facing product: Jost sans-serif, Playfair Display serif, teal primary, terracotta accents.

Professional cool-toned theme for Visitza's supplier portal: Inter, blue-grey primary.

Teal primary with orange secondary for Visitza's partner portal.

Indigo-blue primary with a dark sidebar for Visitza's internal admin dashboard.

A phase-aware loading spinner that transitions through loading → filling → complete states, optionally revealing the South African flag on completion.

Minimal rounded icon-button primitive with overlay, ghost, and outline variants. Base component for SaveButton, ShareButton, and RecordButton.

A reusable heart-toggle save button with overlay, ghost, and outline variants.

A share-action icon button with a lift-off animation on click.

A microphone-toggle record button with idle, recording, and confirmed states.

A composable fixed-bottom mobile navigation bar with asChild support.

A composable infinite-scroll ticker strip with light and dark variants.

A composable product display card with compound sub-components.

A composable scroll-reveal primitive with shared IntersectionObserver.

An opinionated accommodation listing card built on ProductCard.

A slide-out panel component for mobile navigation and side content.

Composable header navigation links with animated active indicators.

An auth-aware account dropdown with composable trigger variants.

Geometric dual-chevron emblem for the Keystone Core brand.

A composable testimonial card with star ratings, quote icon, avatar, and author details.

Platform-agnostic chat UI with theme variants (default, whatsapp, imessage, slack), composable compound components, and paste-to-parse input.

Client-only camera button and menu item components with SSR-safe capability detection.

A 1:1 crop dialog with zoom, pan, and circular/square guide overlay.

Camera capture dialog with front/back switching, capture preview, and file upload fallback.

Lat/lon pair capture with shared DD/DDM/DMS format toggle, inline N/S/E/W direction toggles, smart paste parser, normalized DD preview, and copy to clipboard.

Coordinate input supporting DD, DDM, and DMS formats with directional toggle. Includes helpers for parsing, formatting, and clamping latitude/longitude values.

Accommodation booking date-range picker with 2-month calendar, blocked dates, min/max nights, hover preview, and radio-friendly trigger.

Accessible increment / decrement control for numeric values — designed for guest counts, bedroom selectors, and similar booking fields.

A group of toggle chips for single or multi-select filtering — property types, vibes, amenities, and similar facets.

A three-position toggle for expressing preference strength: Required, Preferred, or Any.

Compact inline message for booking constraints and policy notes — neutral, info, warning, or destructive variants.

Dual min / max input for bounded numeric ranges — price per night, size, distance, and similar filters.

Server-safe presentational trigger shell for compact booking search bars — consistent label, summary, and focus treatment across search controls.

Popover-based guest selector for accommodation booking — adults, children, infants, and pets with occupancy constraints.

Chip-based amenity selector with a Command-powered overflow popover for searching the full amenity list.

Composable right-side Sheet panel for advanced booking filters — composable children API, scrollable body, Apply / Reset actions.

Production-ready unified accommodation search bar — destination, date range, guests, and optional advanced filters. Horizontal and stacked layouts.

Free-text search input with grouped autocomplete suggestions. Full ARIA combobox semantics. Shell and input variants.

Calendar popover for picking a single date. ISO string value, min/max/disabled dates, shell and button trigger variants.

Generic category-driven party composition picker. Configure any set of traveller types (adult/child/concession/bags) via PartyCategory[]. GuestPicker is the accommodation wrapper.

Time slot grid for slot-inventory products. Grouped by Morning/Afternoon/Evening. Handles available, limited (spots-left badge), sold-out, and closed states.

Per-ticket-type quantity selector with per-unit pricing and running total. Enforces min/max total quantities.

Result card for an activity / experience / tour. Image, metadata, availability badge, rating, price, and Book CTA.

Radio card group for selecting a product variant (e.g. Private / Shared / Self-guided). Full ARIA radiogroup semantics.

Horizontal 7-day date strip with colour-coded availability dots. Used as a compact date picker in ActivityBookingSidebar.

Horizontal search bar for activity / experience / tour search. Composes QueryCombobox + SingleDatePicker + PartyPicker.

Step-by-step booking sidebar for a single activity. Orchestrates product option, date, time slot, and ticket selection with progressive disclosure.

Horizontal search bar for accommodation / stay search. Composes QueryCombobox (destination) + DateRangePicker (check-in/out) + GuestPickerPanel (guests).

Multi-room occupancy allocation editor. One card per room with adults/children/child-age CounterInput rows. Supports adding and removing rooms.

Result card for an accommodation / stay property. Displays image, star rating, guest score, highlights, cancellation policy, nightly rate, and stay total.

Radio-style rate plan cards for accommodation booking. Shows price per night, stay total, cancellation policy, and meal inclusion.

Horizontal search bar for the Transport pillar. Composes two QueryCombobox fields (origin + destination), a date picker that switches between single and range, and a PartyPicker with passenger-specific labels. An optional ToggleGroup mode selector renders below the bar.

Promoted filter row for transport result pages. Boolean chip toggles (Direct only, Refundable, Baggage included, Time of day) plus a visually distinct Sort select. Always visible above results without requiring the AdvancedFiltersPanel sheet.

Timetable-style result row for the Transport pillar. Segment-aware comparison row showing times, route, duration, stops, price, and trust signals without an image shell. Inline Collapsible for cancellation terms, inclusions, and pickup instructions.

Transport-specific empty and error state panel with presets for no-routes, indirect-only, unavailable, invalid-route, provider-error, stale-route, and price-unavailable scenarios. Includes a TransportNoResults convenience component.

Server-safe image + content shell for result cards. Use as the base for ActivityCard, PropertyCard, or any custom result card.

Booking confirmation / review summary card with image, title, itemised price breakdown, total, and cancellation policy.

Horizontal row of active filter chips with individual remove buttons and an optional Clear All action.

Results page header showing result count, search context, and optional sort/filter controls.

Responsive result card grid. Cards variant: 1→2→3 columns. List variant: single column for horizontal cards.

Centred zero-results empty state with icon, title, description, and optional CTA action.

AvailabilityBadge (single status badge) and AvailabilityBadges (row of per-variant badges). Used on ActivityCard, PropertyCard, and calendar cells.

Composable photo upload with drag-drop, camera capture, image cropping, and preview — designed to compose with shadcn Avatar.

Themed React Email component wrappers with shadcn-style defaults. Tailwind-first — resolved theme tokens are injected via Tailwind config, not inline styles. Wraps the full @react-email/components surface: Html, Head, Body, Tailwind, Container, Section, Row, Column, Text, Heading, Button, Link, Hr, Img, Preview, Font, Markdown, CodeBlock, CodeInline. Also exports: DEFAULT_EMAIL_THEME, emailButtonVariants (cva). Pass theme to Body, Tailwind, Hr, and EmailMetaList explicitly.

shadcn/ui Card translated for React Email. Full Card API: Card (with optional accent-bar prop), CardHeader, CardTitle, CardDescription, CardContent, CardFooter. Accent bar uses a triple height approach (CSS class + inline style + HTML attribute) for Outlook compatibility.

shadcn/ui Badge translated for React Email. Inline <span> label with cva variants: default, secondary, outline, muted, destructive, success, warning. Size variants: sm, default, lg. Success and warning use hardcoded hex since they fall outside the shadcn semantic token set.

shadcn/ui Alert translated for React Email. Uses a narrow left-accent Column to simulate CSS border-left (email-safe; Column width uses triple approach for Outlook). Variants: default, info, success, warning, destructive. Includes AlertTitle and AlertDescription sub-components.

Higher-level helpers that eliminate repeated boilerplate across templates. EmailLogo — conditional centred logo section. EmailEyebrow — small uppercase label above headings, defaults to text-primary. EmailFooter — copyright line with optional support email and unsubscribe link. EmailMetaList — key-value metadata table (receipts, bookings) with background applied at the <td> level for Outlook compatibility; accepts optional theme prop.

A single metric card with label, large value, optional sub-text, icon, and trend indicator. Use independently or compose into AdminDashboard.

Timestamped event log with kind icons (token, client, registry). Use independently or compose into AdminDashboard.

The Visitza wordmark with South African flag emblem. Full-colour and mono modes. Lives in the Visitza client scope — not core.

The Visitza location-pin emblem with SA flag — compact mark for avatars, favicons, and 404 heroes.

PartnerLogo, SupplierLogo, and AdminLogo — wordmark plus vertical separator and uppercase product suffix.

Full-page not-found for the Visitza public product: semantic tokens, gradient accent bar, emblem, soft glows. Install as app/not-found.tsx (registry:page) in a Next.js app with Visitza theme.

Thin, composable Visitza email micro-components. VisitzaBodyText (body copy), VisitzaMetaText (meta/caption), VisitzaPrimaryCta (Section + Button, accepts href + children + className only). Eliminates repeated inline-style patterns across templates.

A dark-cinematic full-screen waitlist hero block with composable sub-components.

A composable sticky header with scroll-driven transparent/solid transitions and mobile navigation support.

Composable multi-column footer with brand slot, link groups, socials, separator, and legal bar.

A composable testimonials section layout with responsive 3-column grid.

Sidebar layout shell for internal Keystone Core tooling. Includes navigation, branding, and account menu slots.

Bearer token management UI. Create scoped tokens for client registry access, copy them on first generation, and revoke them with confirmation.

Internal admin overview with registry stats, quick actions, and a recent activity feed. Composed from AdminStat, AdminActivityFeed, and AdminQuickAction.

Shared ISO-string-based value model for multi-domain booking search (accommodation + activities). Serializable, URL-safe, server-friendly.

Exported pure helpers for transport result display: formatTransportTime (timezone-safe), formatTransportDuration, formatStopsLabel, extractOffsetMinutes. Testable independently of the React component.

Map/split-view integration contract for the Transport pillar. Defines TransportMapPin, TransportSplitViewConfig, extractMapPins, and extractMapPinsFromRows. Library-agnostic — consumers adapt to their map implementation.

SSR-safe React hook that returns true when the user has enabled 'Reduce motion' in their OS accessibility settings.

A React hook for sharing content using the Web Share API.

A React hook for accessing the browser Geolocation API with one-shot and continuous watch modes.

A React hook for accessing the Network Information API with real-time updates.

A React hook for controlling device vibration via the Vibration API. SSR-safe.

A comprehensive React hook for audio recording with real-time analysis.

A generic React hook for IndexedDB CRUD operations with automatic database initialisation. SSR-safe.

A React hook for managing localStorage with automatic JSON serialisation. SSR-safe.

SSR-safe hook for detecting client capabilities (camera, mounted state) using useSyncExternalStore.

Hook for managing file attachments with local preview, upload progress, and message linking.

Hook for managing chat import state with a parser function dependency.

Lightweight locale-aware price formatter using Intl.NumberFormat. Defaults to South African Rand (ZAR).

Platform-agnostic types for chat data (messages, participants, attachments) compatible with WhatsApp, Telegram, iMessage, and custom sources.

Parses WhatsApp chat exports into generic Chat format with attachment and file matching support.

email-guards (URLs, recipients, subjects, hex colors) plus escape helpers, inline logo, palettes, renderVisitzaEmailLayout, and CTA rows for Visitza transactional emails.

Renders waitlist confirmation emails (HTML + plain text) for public, partner, and supplier products. Compatible with any email service.

Magic-link style email verification template with the same Visitza layout as waitlist emails.

Serialize and parse TransportSearchValue to/from URLSearchParams. Flat, human-readable param scheme (from_id, to_id, dm, pax_*) for shareable, bookmarkable transport search URLs.

Shared ISO date parsing, formatting, and arithmetic helpers for the booking component system. Single source of truth for parseISODate, toISODate, todayISO, addDays, and formatDisplayDate.

Shared Intl.NumberFormat-based money formatting for Money objects. Converts smallest-unit amounts (e.g. cents) to locale-aware currency strings.

Shared availability status label/variant config and helper functions. Single source of truth for availability display logic across badges and cards.

Core contracts for the email subsystem: EmailAddress, EmailAttachment, EmailMessage, EmailSendResult, EmailRenderResult, EmailProvider, EmailThemeTokens, EmailTemplateDefinition<Props>, EmailTemplateRenderContext. Runtime-neutral — no env access or provider SDKs.

Validation and sanitization utilities: hex color validation, URL safety checks (blocks javascript:/data: schemes), email address normalization, subject-line clamping, plain-text clamping, numeric range clamping. Safe to use server-side or in edge runtimes.

URL construction helpers for email template links. Builds and validates absolute https URLs for magic links, password resets, email confirmations, and unsubscribe flows. Receives siteUrl from the template render context — never reads env vars.

Bridges shadcn HSL design tokens to email-safe concrete hex values. Exports: hslToHex, resolveEmailTheme, createEmailTailwindConfig, KC_DEFAULT_HSL_TOKENS. The Tailwind config uses pixelBasedPreset-compatible output for React Email.

Runtime-neutral render pipeline. Exports: renderEmailTemplate (EmailTemplateDefinition → EmailRenderResult), buildEmailMessage (compose render result + envelope into EmailMessage), renderAndSend (render → build → send in one call), EmailEnvelope type. Depends on @react-email/render — templates and primitives never import it directly.

Next.js render adapter. Exports createEmailRenderer(config?) factory that reads process.env.NEXT_PUBLIC_SITE_URL and wraps the core render pipeline. The only place in the email subsystem that reads process.env. Also re-exports buildEmailMessage and renderAndSend for convenience.

Supabase Edge Function (Deno) render adapter. Same API as core/email-render-next — createEmailRenderer(config?) — but reads Deno.env.get('SITE_URL'). Requires @react-email/render mapped via deno.json import map: 'npm:@react-email/render@^2.0.5'. The only place in the email subsystem that reads Deno.env.

Resend EmailProvider adapter. Exports createResendProvider({ apiKey, defaultFrom? }). Maps EmailMessage to Resend SDK: tags Record → [{ name, value }], idempotencyKey → SDK options arg (not raw header), attachments with Buffer/Uint8Array content. Works in Node.js and Supabase Edge (Resend SDK is edge-compatible).

Nodemailer SMTP EmailProvider adapter. Node.js only — not compatible with Supabase Edge. Exports createSmtpProvider({ host, port, secure?, auth?, tls? }). secure defaults to true when port === 465. idempotencyKey and correlationId are forwarded as X-Idempotency-Key / X-Correlation-Id headers for observability. Suitable for production SMTP and local dev (Mailhog/Mailpit).

Generic passwordless sign-in / email-verification template. Auth email pattern: eyebrow → heading → body → Alert(warning) expiry note → Button(lg) CTA → Hr → security disclaimer. Uses EmailLogo, EmailEyebrow, EmailFooter composites.

Generic password reset template. Same auth email pattern as magic-link: Alert(warning) for the expiry note, Button(lg) CTA, security disclaimer. Uses EmailLogo, EmailEyebrow, EmailFooter composites.

Generic post-signup welcome / onboarding template. Demonstrates the numbered next-steps pattern: bold-title + muted-body Text pairs below an Hr separator. Conditional CTA Button(lg). Uses EmailLogo, EmailEyebrow, EmailFooter composites.

Generic one-section transactional notification template. Title and body are props — suitable for booking confirmations, status updates, or system alerts. Optional CTA Button. Uses EmailLogo, EmailEyebrow, EmailFooter composites.

Generic newsletter template with headline, intro copy, and optional CTA. Features a split accent bar (60% primary / 40% secondary) using percentage Column widths with Outlook-compatible width attributes. Uses EmailLogo, EmailEyebrow, EmailFooter composites.

Generic post-experience review request template. Star rating hint rendered as a large Unicode character. Uses accent="secondary" card and text-secondary eyebrow to visually distinguish from auth/transactional emails. Uses EmailLogo, EmailEyebrow, EmailFooter composites.

Generic transactional receipt template. Confirm → detail → total hierarchy: Alert(success) confirms payment amount first, EmailMetaList shows order metadata, LineItemRow sub-component renders each line, two-column Row/Column total with inline textAlign for Outlook. Uses EmailLogo, EmailEyebrow, EmailFooter, EmailMetaList composites.

Single source of truth for Visitza email brand configuration. Exports VisitzaEmailDefaults, VISITZA_EMAIL_DEFAULTS table (public/partner/supplier), and getVisitzaEmailDefaults(product) helper. Replaces the old email-brands dual-table approach.

Maps a Visitza product's palette and brand colors into a resolved EmailThemeTokens object. Exports getVisitzaEmailTheme(product). Use this when you need the theme tokens outside of VisitzaEmailLayout.

Shared React Email layout for Visitza transactional emails. Accepts product (public/partner/supplier) and derives brand config + theme tokens internally. Dark-themed card with gradient accent bar, inline SVG logo, and branded footer.

React Email address verification (magic link) template for Visitza. Supports all three product variants with dark theming.

React Email password-reset template for Visitza. Single-action layout with expiry note and plain-text fallback link. Supports all three product variants.

React Email waitlist confirmation template for Visitza. Supports public, partner, and supplier product variants with brand-aware dark theming.

React Email booking confirmation template for Visitza. Includes booking reference, experience name, date/time, meeting point, optional line-item breakdown and total, and a view-booking CTA.

React Email booking cancellation notice for Visitza. Includes booking reference, experience, optional cancellation reason, refund amount, and refund timeline note.

React Email upcoming-experience reminder for Visitza. Sent 24–48 hours before the experience. Highlights date, time, and meeting point.

React Email post-experience review request for Visitza. Short, single-action layout with experience name, optional date context, and direct review link.