Appointment card

Groups supplied appointment time, timezone, clinician, location, and status with an optional action slot.

Preview

Care check-in

Confirmed

10 September10:30–11:00 · Europe/Amsterdam

Clinician: Robin Lee
Location: Video appointment

In action

Next visit

A fictional booking with a supplied timezone and confirmation status.

Care team check-in

Confirmed

18 September 202610:30–11:00 · Europe/Amsterdam, UTC+02:00

Clinician: Alex Morgan
Location: Room 04, demo clinic

When to use

Use it for

Confirmed, proposed, cancelled, or otherwise explicitly supplied appointments.
Add real links or buttons as children when navigation or an action is available.

Not for

Inferring confirmation, converting timezones, or deriving a relative date from the system clock.
Rendering placeholder Join, Cancel, or Reschedule buttons without working actions.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { AppointmentCard } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/appointment-card.

2. Vendor the source

npx @noorddev/vlak-cli add appointment-card

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/appointment-card.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { AppointmentCard } from "@noorddev/vlak-react";

<AppointmentCard appointmentTitle="Care team check-in" dateLabel="18 September 2026" timeLabel="10:30–11:00" timeZone="Europe/Amsterdam, UTC+02:00" dateTime="2026-09-18T10:30:00+02:00" clinician="Alex Morgan" location="Room 04, demo clinic" status="Confirmed" />

// Supply children for real navigation links or application-owned actions.

Props

AppointmentCard

Appointment details exactly as supplied, with an application-owned action slot.

Prop	Type	Description
`appointmentTitle`required	`string`
`dateLabel`required	`ReactNode`
`timeLabel`required	`ReactNode`
`timeZone`required	`ReactNode`	Supplied display timezone; the component performs no date conversion.
`dateTime`	`string`
`clinician`	`ReactNode`
`location`	`ReactNode`
`status`required	`ReactNode`
`children`	`ReactNode`	Actual links or buttons whose actions are owned by the application.

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab, Enter, Space`	Supplied links and buttons retain their native keyboard interactions. The card adds no tab stop.

Accessibility

Appointment title names a group. Date, time, timezone, and status are text; clinician and location use a description list.
Missing clinician and location are explicitly labelled as not supplied.
Use native action controls with accessible names and at least 44px targets in the children slot.
Native root attributes and the div ref pass through. The caller owns status updates and announcements.

Markup

<div class="rs-appointment-card" role="group" aria-label="Care team check-in"><div class="rs-appointment-card-header"><p class="rs-appointment-card-title">Care team check-in</p><span class="rs-appointment-card-status">Confirmed</span></div><div class="rs-appointment-card-when"><span class="rs-appointment-card-date">18 September 2026</span><span class="rs-appointment-card-time">10:30–11:00 · Europe/Amsterdam, UTC+02:00</span></div><dl class="rs-appointment-card-details"><div class="rs-appointment-card-field"><dt class="rs-appointment-card-label">Clinician</dt><dd class="rs-appointment-card-value">Alex Morgan</dd></div><div class="rs-appointment-card-field"><dt class="rs-appointment-card-label">Location</dt><dd class="rs-appointment-card-value">Room 04, demo clinic</dd></div></dl></div>

Classes

.rs-appointment-card.rs-appointment-card-header.rs-appointment-card-title.rs-appointment-card-status.rs-appointment-card-when.rs-appointment-card-date.rs-appointment-card-time.rs-appointment-card-details.rs-appointment-card-field.rs-appointment-card-label.rs-appointment-card-value.rs-appointment-card-actions