React Components

@clinikapi/react provides 14 pre-built clinical UI widgets that communicate through your backend proxy — never directly to ClinikAPI.

npm install @clinikapi/react

Then import the stylesheet once, anywhere in your app:

import '@clinikapi/react/styles.css';

That is the entire setup. The widgets are built on shadcn/ui + Radix, and every rule in the stylesheet is scoped to the widgets’ own root element — it cannot restyle your pages, and you do not need Tailwind (or any particular build setup) to use it.

Upgrading from 0.2.x? The widgets were rebuilt on shadcn/ui in 0.3.0. Add the styles.css import above — without it they render unstyled. No component props changed.

Theming

Widgets read a set of --ck-* CSS custom properties, so you can match your brand without touching component code. Values are HSL channels, the same convention shadcn/ui uses:

.clinik-root {
  --ck-primary: 173 80% 40%;   /* teal */
  --ck-radius: 0.375rem;       /* squarer corners */
}

Every widget also takes a theme prop — 'light' (default), 'dark', 'glassmorphism', or 'inherit'. Pass theme="inherit" in an app that already uses shadcn/ui and the widgets map straight onto your own --primary / --border / --radius variables:

<PatientDashboard proxyUrl="/api/clinik" theme="inherit" />

This is opt-in rather than automatic, because an app that is not using shadcn/ui may define --primary in a different format (a hex, say), which would render the widgets incorrectly.

The Proxy Pattern

React widgets run in the browser and cannot use the SDK directly (that would expose your API key). Instead, they talk to your backend through a proxyUrl:

Browser Widget → Your Backend Proxy → ClinikAPI SDK → ClinikAPI

Setting Up a Proxy

// Your backend (e.g. Next.js API route)
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 the user with YOUR auth system first
  // Then proxy to ClinikAPI based on the action
  switch (action) {
    case 'patients.read':
      return Response.json(await clinik.patients.read(data.id, { include: data.include }));
    case 'patients.create':
      return Response.json(await clinik.patients.create(data));
    case 'appointments.create':
      return Response.json(await clinik.appointments.create(data));
    case 'prescriptions.create':
      return Response.json(await clinik.prescriptions.create(data));
    case 'notes.create':
      return Response.json(await clinik.notes.create(data));
    case 'intakes.submit':
      return Response.json(await clinik.intakes.submit(data));
    case 'consents.sign':
      return Response.json(await clinik.consents.sign(data));
    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 });
  }
}

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

export default function PatientPage({ patientId }: { patientId: string }) {
  return (
    <PatientDashboard
      proxyUrl="/api/clinik"
      patientId={patientId}
    />
  );
}

Available Widgets

Widget	Description	Key Fields
PatientDashboard	Full patient overview with encounters, vitals, meds, labs, notes	demographics, appointments, prescriptions, labs, notes
AppointmentScheduler	Book and manage appointments	date, time, type, serviceType, specialty, priority, description
PrescriptionForm	Create prescriptions with full dosage	medication, dosage, priority, category, courseOfTherapy, substitution
NoteEditor	Clinical note editor with type and category	title, content, type, docStatus, category, practiceSetting
IntakeForm	Patient intake questionnaire	items with nested answers (text, boolean, integer, coded, quantity)
ConsentManager	Consent signing and management	scope, category, verification, provision
VitalsWidget	Vital signs recording	heart rate, blood pressure, temperature
LabResultsWidget	Lab report ordering	code, category, effectiveDateTime/Period
PrescriptionWidget	Quick medication entry	medication name, status
ConditionTracker	Record conditions and diagnoses	code, clinicalStatus, severity, onset
AllergyRecorder	Record allergies and intolerances	allergen, type, category, criticality, reaction
ImmunizationLogger	Log immunizations	vaccine, site, route, lot number, manufacturer
CarePlanBuilder	Create care plans	title, description, status, intent, category
GoalSetter	Set patient goals	description, lifecycle, achievement, priority, target date

Common Props

All widgets accept:

Prop	Type	Required	Description
`proxyUrl`	`string`	Yes	Your backend proxy endpoint (or `'demo'` for demo mode)
`patientId`	`string`	Yes	Patient ID
`theme`	`'light' \| 'dark'`	No	Color theme (default: light)

Demo Mode

Set proxyUrl="demo" to run any widget in demo mode — no backend needed, no API calls made. Useful for prototyping and showcasing.

<PatientDashboard proxyUrl="demo" />
<AppointmentScheduler proxyUrl="demo" patientId="demo-patient" />

Security

Widgets never receive your API key
All data flows through your backend proxy
You control authentication and authorization on your proxy
proxyUrl is validated to prevent open redirect attacks — must be a relative path or same-origin URL

​React Components

​Theming

​The Proxy Pattern

​Setting Up a Proxy

​Using a Widget

​Available Widgets

​Common Props

​Demo Mode

​Security

React Components

Theming

The Proxy Pattern

Setting Up a Proxy

Using a Widget

Available Widgets

Common Props

Demo Mode

Security