BJORK Distribution plot

Component 17

About

Distribution plot is a production-ready charts component from BJORK UI, packaged for shadcn registries.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds BJORK Distribution plot to your project and fits it to your theme.

Code

How BJORK Distribution plot is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useMemo, useState } from "react";
import { DistributionPlot, createDistributionSample } from "@/components/ui/bjork-distribution-plot";
import { DemoColumn } from "@/components/ui/bjork-distribution-plot-utils/app-charts-_demo-controls";

const LATENCY = createDistributionSample(12, "latency");

const BIMODAL = createDistributionSample(19, "bimodal");
function SourceDemo(){
const isPreview = false;
const [kind, setKind] = useState<"latency" | "bimodal">("latency");
const [bins, setBins] = useState<number | "auto">("auto");
const [density, setDensity] = useState(true);
function reset() {
    setKind("latency");
    setBins("auto");
    setDensity(true);
  }
const values = kind === "latency" ? LATENCY : BIMODAL;
const domain = useMemo<[number, number]>(() => (kind === "latency" ? [0, 600] : [0, 700]), [kind]);
return <>

      {isPreview ? (
        <div className="w-[740px]">
          <DistributionPlot values={LATENCY} domain={[0, 600]} defaultThreshold={340} unit="ms" height={360} ariaLabel="API latency" />
        </div>
      ) : (
        <DemoColumn width={820}>
          <DistributionPlot
            key={kind}
            values={values}
            domain={domain}
            bins={bins}
            onBinsChange={setBins}
            showDensity={density}
            defaultThreshold={kind === "latency" ? 340 : 320}
            unit="ms"
            height={340}
            ariaLabel={kind === "latency" ? "API latency" : "Checkout time"}
          />
        </DemoColumn>
      )}
    
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}