Render a surface.

Import what you need and render — no color props, no theme wiring. Here is an appointment row: a Card wrapping a status badge and a primary action, themed by Lumos automatically.

Component

AppointmentRow.tsx

import { Button, Card, CardContent, StatusBadge }
  from '@tarva/ui';

export function AppointmentRow() {
  return (
    <Card>
      <CardContent className="flex items-center justify-between">
        <StatusBadge status="active">Confirmed</StatusBadge>
        <Button variant="ghost-terracotta">View appointment</Button>
      </CardContent>
    </Card>
  );
}

Rendered · Lumos light

Tue · 2:30 PM — Hydrafacial · Room 2

Confirmed

The theme decides the color.

status="active" resolves to moss; variant="ghost-terracotta" renders the CTA with its label in terracotta — never a solid fill. Swap the scheme and this same markup re-skins.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait