Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/wellness-editorial-section.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/health/health5.tsx instead.
Usage
The file also exports health5Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Health5, health5Demo } from "@/components/blocks/health/health5"; export default function Page() { return <Health5 {...health5Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | none | Small uppercase label above the heading; only rendered when set. |
| heading | ReactNode | none | Section heading. |
| paragraphs | string[] | none | Body copy, one paragraph per array item. |
| highlights | string[] | [] | Checked bullet-point list below the body copy; the whole list is skipped when empty. |
| buttons | ButtonItem[] | [] | CTA buttons at the end of the section; skipped when empty. |
| className | string | none | Extra classes for the outer section element. |
Types
type ButtonItem = { label: string; href?: string; variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive"; };
Behavior notes
- paragraphs has no length limit and no truncation; every string in the array renders as its own <p>.
- highlights and buttons are independent and each only renders its section when it has at least one item.
- CTA buttons are plain links (via Button's render prop) to a href; there is no form submission or client-side action behind them, matching every other static About/CTA block in this repo.
- Every button defaults to variant "default" unless it sets its own variant.
More Health Blocks
View all →Care Programme Cards
Three hairline programme cards pairing a light programme name with a muted duration line, a short explanation, and a checked feature list.
Care Overview Dashboard
Clinical overview with an eyebrow over a hairline rule, a two-column heading, and a bordered dashboard panel with a stat, a retention ring, a status strip, and an outcomes row.
Daily Health Check-in
Two-column layout with feature highlights and a daily summary card showing heart rate, activity, and recovery metrics.
Health Statistics Display
Large-format statistics grid showcasing key metrics like member counts, satisfaction rates, and years of service.
Medical Services Grid
Service cards displaying medical specialties with appointment durations, feature lists, and booking CTAs.
Wellness Hero Section
Split-layout hero with large typography, serene imagery, and a floating testimonial card.