Catalog
Components.
Every component in the design system, grouped by role.
Core
Button.
5 variants × 3 sizes. Renders as <Link> when href is provided, otherwise a native <button>. Supports type="submit" for forms.
Input.
Text input with a consistent OH border, focus ring, and disabled styling. Use for forms across landing + admin surfaces.
Textarea.
Multi-line text field matching Input styles. Includes resize behavior that stays neat inside cards and forms.
Select.
Native select with OH styling. Best for simple dropdowns (service, clinic, time).
Checkbox.
Accessible checkbox with cyan checked state. Designed to pair with short consent / opt-in labels.
Switch.
Toggle control for on/off settings. Uses cyan accent when enabled and a subtle neutral track when disabled.
Tabs.
Small tab switcher for in-page navigation (e.g. Overview / Details / Files). Controlled + uncontrolled usage supported.
Badge.
Small pill label. Four variants for semantic emphasis.
Card.
Rounded surface container with OH border and padding. Use as the building block for tiles, forms, and preview frames.
Divider.
Simple horizontal rule with OH border color. Works on light and dark surfaces.
SectionHeader.
Eyebrow + H2 (with auto-appended cyan dot) + optional subtitle. Supports left/center alignment and dark/light themes.
StatCard.
Dark card highlighting a single stat — large cyan number + muted label.
Landing Page
AnnouncementBar.
Full-width cyan ribbon at the top of the site.
Navbar.
Sticky top nav. Desktop links with active-state tracking via usePathname; mobile hamburger opens a full-screen overlay.
Footer.
4-column dark footer with giant ghost "OH!" watermark, contact + services + connect links, and a copyright row.
CTABanner.
Full-width cyan CTA band with a white pill button. All strings overridable via props.
ContactForm.
Client component. First/Last name grid, phone, email, message. Submit shows an in-line confirmation.
FAQAccordion.
Reusable accordion component, used by the FAQs page. Takes an items prop.
Admin
AdminSidebar.
240px dark dashboard nav. OH! mark at the top, then icon + label links. Active link gets the cyan accent treatment from the viewer sidebar.
AdminPageHeader.
Bar for the top of an admin page: breadcrumb + title with cyan dot + optional subtitle, plus an actions slot on the right.
StatTile.
Light admin-console stat card. Small uppercase label, large dark number, optional trend badge. Companion to StatCard (which is dark).
DataTable.
Generic table. Takes columns (key + label) and rows (keyed by column.key). Zebra rows, hover state, brand-aligned borders.
UserAvatarMenu.
Client component. Cyan-initial avatar button; click opens a small menu with Profile / Account settings / Sign out.