Add Vitals & Lab Results Widgets to Your Clinical App (React)

Vitals and lab results are the data a clinical app lives on — a blood pressure reading, an A1c, a cholesterol panel. Under the hood they're all FHIR Observations, and building the capture forms, the result displays, and the storage by hand is a slow, repetitive slog. Two pre-built widgets handle all of it. This guide shows you how to add vitals capture and lab results to your React app, step by step.

The toolkit we recommend is ClinikAPI — a FHIR-native platform with a React component library. Here's why we suggest it up front:

• Free to start: Get your API keys in seconds — no credit card needed.
• Two widgets: VitalsWidget for vitals, LabResultsWidget for labs.
• Stored as FHIR: Both save data as standard Observation records.
• Standardized: Lab data supports LOINC codes out of the box.
• Compliant: HIPAA-compliant, SOC 2-audited, with a signed BAA.

Quick Answer

To add vitals and lab results to a React clinical app, use pre-built FHIR-native widgets instead of building them yourself. ClinikAPI's VitalsWidget captures vitals like heart rate and blood pressure, and LabResultsWidget supports lab ordering with LOINC codes and categories and displays results. Both store their data as FHIR Observation records — the standard for a measurement — so everything stays searchable by patient, type, and date, and connected to the chart. You add each widget, point it at a small backend route (the proxyUrl), and pass a patientId. You skip the input forms, the charts, and the storage. The proxy keeps your secret key server-side, and a theme prop matches your app.

Vitals and labs are both Observations

Here's the unifying idea: in FHIR, a vital sign and a lab result are both Observations — a single measurement linked to a patient. That's why the same approach (a widget that reads and writes Observations) works for both. The widgets just specialize the interface: one for capturing vitals, one for ordering and showing labs.

Step 1: Install and set up the proxy

Install the components and SDK, and set up the backend proxy route:

npm install @clinikapi/react @clinikapi/sdk

The widgets POST { action, data } to your route; vitals use observations.create and labs use labs.create:

// app/api/clinik/route.ts — server-only
import { Clinik } from '@clinikapi/sdk'

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

export async function POST(req: Request) {
  const { action, data } = await req.json()
  // Authenticate + authorize for data.patientId first.
  switch (action) {
    case 'observations.create':
      return Response.json(await clinik.observations.create(data))
    case 'labs.create':
      return Response.json(await clinik.labs.create(data))
    default:
      return Response.json({ error: 'Unknown action' }, { status: 400 })
  }
}

A vital sign is a FHIR Observation with a LOINC code and a valueQuantity — here's exactly what the SDK stores when the vitals widget records a heart rate:

await clinik.observations.create({
  status: 'final',
  code: '8867-4',                 // LOINC: heart rate
  patientId: 'patient-123',
  effectiveDateTime: '2026-01-15T10:30:00Z',
  valueQuantity: { value: 72, unit: 'beats/min', system: 'http://unitsofmeasure.org', code: '/min' },
  category: 'vital-signs',
})
// → { data: Observation, meta: { requestId, status, ... } }

(See the dashboard tutorial for the full route, response shape, and proxyUrl="demo" mode.)

Step 2: Capture vitals

The VitalsWidget captures vitals like heart rate and blood pressure and stores them as FHIR Observations:

import { VitalsWidget } from '@clinikapi/react'

<VitalsWidget
  proxyUrl="/api/clinik"
  patientId={patientId}
  theme="light"
/>

Every reading becomes a standard Observation — so it's searchable and connected, not a loose number in your database.

Step 3: Order and show lab results

The LabResultsWidget supports lab ordering with LOINC codes and categories, and displays results:

import { LabResultsWidget } from '@clinikapi/react'

<LabResultsWidget
  proxyUrl="/api/clinik"
  patientId={patientId}
  theme="light"
/>

What you skipped

Product Insight: Why ClinikAPI Fits Vitals & Labs

Measurement data is only useful if it's stored cleanly and stays connected. ClinikAPI's widgets do both by default.

What you get:

• VitalsWidget — capture vitals as FHIR Observations.
• LabResultsWidget — order and display labs with LOINC codes.
• Searchable data — find readings by patient, type, and date.
• The proxy pattern — your secret key stays server-side.
• Compliance included — HIPAA-compliant, SOC 2-audited, with a signed BAA.

See them in the UI Library, and read Building a Remote Patient Monitoring App for charting vitals over time.

Frequently Asked Questions

1. How do I add vitals to a React app?

Use ClinikAPI's VitalsWidget — add it with a proxyUrl and patientId, and it captures vitals and stores them as FHIR Observations.

2. How do I show lab results?

Use LabResultsWidget — it supports lab ordering with LOINC codes and categories and displays results, stored as FHIR.

3. Are vitals and labs stored as FHIR?

Yes — both as FHIR Observation records, so they're searchable and connected to the chart.

4. What are LOINC codes?

A coding system that gives each lab test one exact identifier, so your lab data is standardized and interoperable. The widget supports them.

5. Can I theme the widgets?

Yes — both take a theme prop (like light or dark) to match your app.

Conclusion

Vitals and labs are the lifeblood of a clinical app, and both are FHIR Observations underneath — which is why two pre-built widgets can handle the capture, display, and storage you'd otherwise build by hand. Drop in VitalsWidget and LabResultsWidget, provide a patient ID, and your app captures vitals and shows lab results as clean, searchable, standardized FHIR data — no forms, charts, or plumbing required.

Key takeaways:

• Vitals and lab results are both FHIR Observations under the hood.
• VitalsWidget captures vitals; LabResultsWidget orders and shows labs.
• Lab data supports LOINC codes, so it's standardized and interoperable.
• Both store standard Observations — searchable and connected.
• The proxy pattern keeps your secret key server-side.

Ready to build? Explore the UI Library or get your free API keys.

Related Articles

• Building a Remote Patient Monitoring App on FHIR
• How to Build a Patient Dashboard in React
• Healthcare Data API: Read, Write & Search Clinical Data
• Healthcare React Component Library: The Complete Guide
• Pre-Built Healthcare UI Components