Hairline Capability MatrixPRO

npx shadcn add "https://ui.beste.co/r/feature261?email=YOUR_EMAIL&license_key=YOUR_KEY"

npx shadcn add "https://ui.beste.co/r-base/feature261?email=YOUR_EMAIL&license_key=YOUR_KEY"

import { Feature261, feature261Demo } from "@/components/beste/block/feature261";

export default function Page() {
  return <Feature261 {...feature261Demo} />;
}

import { Feature261 } from "@/components/beste/block/feature261";
import { Layers, RefreshCw, Users } from "lucide-react";
import { Stats16 } from "@/components/beste/piece/stats16";

export default function Page() {
  return (
    <Feature261
      badge={{ label: "Built to be shared" }}
      heading="One workspace the whole practice can be trusted with"
      description="Designed for the eleven people who touch a record, not just the one who owns it."
      spotlight="Intakes completed since the switch, counted from the records themselves."
      media={
        <Stats16
          label="Intakes completed"
          value="1,284"
          delta="12.4%"
          direction="up"
          caption="vs. 1,142 the month before"
          bars={[38, 52, 44, 61, 55, 72, 68, 86]}
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      items={[
        {
          icon: Users,
          title: "Seats, not licences",
          description: "Add a locum on Tuesday and remove them on Friday without emailing anyone.",
        },
        {
          icon: RefreshCw,
          title: "Changes that propagate",
          description: "Move an appointment once and the reminder, room, and invoice follow it.",
        },
        {
          icon: Layers,
          title: "Multi-site by default",
          description: "Four clinics share one setup and still keep their own schedules.",
        },
      ]}
    />
  );
}

import type { LucideIcon } from "lucide-react";

type MatrixCell = {
  icon: LucideIcon;
  title: string;
  description: string;
};

type TileImage = {
  src: string;
  alt: string;
};