Skip to main content
VitalsWidget renders a patient’s recorded vital signs — heart rate, blood pressure, temperature, respiratory rate, oxygen saturation, weight, height, and BMI — alongside trend charts that plot historical values over time. It reads FHIR Observation resources through a backend proxy you control, so your API key never reaches the browser.
Your ClinikAPI secret key must stay on the server. The VitalsWidget sends all requests to your proxyUrl. Your backend proxy fetches observations using your key and returns them to the widget.

​
Props

​
props.proxyUrl
string
required
URL of your backend proxy endpoint. The widget sends a GET request to this URL and expects a list of FHIR Observation resources representing vital signs.
​
props.className
string
CSS class name applied to the widget’s root element for layout and theming control.
​
props.onError
(error: Error) => void
Callback invoked when the widget fails to load observations from your proxy. Use this to show an error state to the clinician.

​
Proxy setup

Your proxy endpoint should return the patient’s vital-signs observations sorted by date. Fetch the most recent 50 to give the trend charts enough data points: 
// app/api/clinik/patients/[id]/vitals/route.ts
import { Clinik } from '@clinikapi/sdk';

const clinik = new Clinik(process.env.CLINIKAPI_SECRET_KEY!);

export async function GET(
  req: Request,
  { params }: { params: { id: string } }
) {
  const { data } = await clinik.observations.search({
    patientId: params.id,
    status: 'final',
    sort: '-date',
    count: 50,
  });

  return Response.json(data);
}
Use status: 'final' to exclude preliminary or entered-in-error observations from the widget. You can relax this filter if your workflow requires showing preliminary results.

​
Usage

import { VitalsWidget } from '@clinikapi/react';

export default function VitalsPage({ patientId }: { patientId: string }) {
  return (
    <VitalsWidget
      proxyUrl={`/api/clinik/patients/${patientId}/vitals`}
      onError={(err) => console.error('Vitals widget error:', err)}
    />
  );
}

​
Displayed vitals

The widget recognizes observations by their LOINC code and renders each vital in its own panel with a trend chart:
Vital signLOINC code
Heart rate8867-4
Blood pressure85354-9
Body temperature8310-5
Respiratory rate9279-1
Oxygen saturation2708-6
Body weight29463-7
Body height8302-2
BMI39156-5
Observations with LOINC codes not in the table above are silently ignored by the widget. To display additional observation types, open a support request or use a custom chart component alongside the widget.