For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to documentation URLs. Homepage markdown is available at /llms.md/content.md. An agent skill is available at /.well-known/agent-skills/site-skill.md.

Medical Profile

A health profile with activity, sleep, alerts and a filterable patient table.

A client-side medical profile with sample data. It is built from medical-profile-01 inside the shared app-shell-01 frame: floating sidebar, notifications, theme switch and a drawer on narrow screens.

Medical ProfileOpen full screen
"use client";

import { RiAddFill, RiFilter3Fill, RiHeartPulseLine } from "@remixicon/react";

import {
  AppShell,
  AppShellHeader,
} from "@/components/blocks/app-shell-01/components/app-shell";
import { MedicalProfile } from "@/components/blocks/medical-profile-01/components/medical-profile";
import { Button } from "@/components/ui/button";

/** The medical profile page inside the shared app shell. */
export function MedicalProfileApp({
  basePath = "",
  links,
  popupClassName,
}: {
  basePath?: string;
  /** Hrefs for the other pages in the sidebar, by nav key. */
  links?: Partial<Record<string, string>>;
  popupClassName?: string;
}) {
  return (
    <AppShell
      selected="medical"
      basePath={basePath}
      links={links}
      popupClassName={popupClassName}
    >
      <AppShellHeader
        title="Medical profile"
        heading="Medical profile"
        icon={RiHeartPulseLine}
        actions={
          <>
            <Button variant="outline">
              <RiFilter3Fill />
              Filters
            </Button>
            <Button>
              <RiAddFill />
              File a report
            </Button>
          </>
        }
      />
      <div className="pb-3">
        <MedicalProfile popupClassName={popupClassName} />
      </div>
    </AppShell>
  );
}