# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/health18. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-28

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Health](/blocks/health)
5. /
6. Care Programme Cards

# Care Programme CardsFREE

Three hairline programme cards, each pairing a light programme name with a muted duration line, a short explanation, a checked list of what is included, and a link into the full programme.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/health18`

## Health18: Care Programme Cards

Three hairline programme cards, each pairing a light programme name with a muted duration line, a short explanation, a checked list of what the programme includes, and a link into the full detail page.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/health18"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/health18"
```

This installs the block to `components/beste/block/health18.tsx` plus the `badge23` component it uses for the eyebrow.

### Quick start

The installed file exports `health18Demo` alongside the block: the exact props behind the preview above. Spread it to get a working programme grid in one line.

tsxCopy

```
import { Health18, health18Demo } from "@/components/beste/block/health18";

export default function ProgrammesPage() {
  return <Health18 {...health18Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Health18 } from "@/components/beste/block/health18";

export default function ProgrammesPage() {
  return (
    <Health18
      badge={{ label: "Programmes" }}
      heading="Care that runs on a plan, not on a reminder"
      description="Each programme is a template your team can start from."
      items={[
        {
          name: "First year of parenthood",
          meta: "12 weeks · weekly sessions",
          description: "A structured start for new families, with room to slow down.",
          includes: ["Fortnightly clinician review", "Between-session messaging"],
          link: { label: "See the programme", href: "/programmes/first-year" },
        },
        {
          name: "Long-term condition care",
          meta: "Ongoing · monthly reviews",
          description: "Steady follow-up for members who stay with you for years.",
          includes: ["Automatic recall before the plan lapses"],
          link: { label: "See the programme", href: "/programmes/long-term" },
        },
      ]}
      footnote="Every programme can be renamed or retired by your team."
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                                     |
| ----------- | ----------------- | ------- | --------------------------------------------------------------- |
| badge       | { label: string } | –       | Monospace eyebrow above the hairline rule, rendered via Badge23 |
| heading     | string            | –       | Section heading in the left column                              |
| description | string            | –       | Supporting paragraph, right-aligned from md up                  |
| items       | Program\[\]       | \[\]    | Programme cards, three to a row on md                           |
| footnote    | string            | –       | Small print under the grid                                      |
| className   | string            | –       | Extra classes for the outer <section>                           |

tsCopy

```
type ActionLink = { label: string; href: string };

type Program = {
  name: string;
  meta: string;
  description: string;
  includes?: string[];
  link: ActionLink;
};
```

### Behavior notes

* `meta` is one free-text line, which is what lets a card read `12 weeks · weekly sessions` or `Ongoing · monthly reviews` without separate duration and cadence fields.
* The includes list takes `flex-1`, so the link is pinned to the bottom edge of every card in the row however uneven the lists are above it.
* `includes` is optional: a card without it drops both the list and the rule above it, and the link moves up to sit under the description.
* The card links are ordinary links at the foot of each card rather than the whole card being clickable, so a card carrying several ideas keeps one clear target.
* Cards deliberately carry no price and no primary button, which is what keeps a programme grid from reading as a pricing table.
* Hover lifts the card border to `hover:border-foreground/40` and nothing else moves, and the link runs its arrow nudge from its own named group.

## More Health blocks

[View all Health](/blocks/health)

[](/block/health5)

FREE

health5

### Medical Services Grid

Service cards displaying medical specialties with appointment durations, feature lists, and CTAs. Perfect for hospitals, clinics, and healthcare provider websites.

[](/block/health3)

FREE

health3

### Medical Specialists Directory

Doctor cards grid showing specialists with ratings, availability status, and next appointment slots. Perfect for healthcare platforms and telemedicine booking systems.

[](/block/health7)

PRO

health7

### Daily Health Check-in

Two-column layout with feature highlights and daily summary card showing heart rate, activity, and recovery metrics. Perfect for fitness coaching and health monitoring apps.

[](/block/health4)

FREE

health4

### Wellness Hero Section

Split-layout hero with large typography, serene imagery, and floating testimonial card. Perfect for yoga studios, meditation apps, and wellness retreat websites.

[](/block/health17)

PRO

health17

### Care Overview Dashboard

A clinical overview with an eyebrow over a hairline rule, a two-column heading, and a bordered dashboard panel that composes a journeys stat, a retention ring, and a slim live-status strip, closing with a big-number outcomes row.

[](/block/health6)

FREE

health6

### Wellness Editorial Section

Long-form content section with rich text, bullet point highlights, and call-to-action buttons. Perfect for wellness blogs, healing journey stories, and health philosophy pages.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.