BJORK Correlation matrix

Component

About

Correlation matrix 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 Correlation matrix to your project and fits it to your theme.

Code

How BJORK Correlation matrix 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 { useState } from "react";
import { CorrelationMatrix, createCorrelationDemo } from "@/components/ui/bjork-correlation-matrix";
import { DemoColumn } from "@/components/ui/bjork-correlation-matrix-utils/app-charts-_demo-controls";

const DEMO = createCorrelationDemo(5);
function SourceDemo(){
const isPreview = false;
const [order, setOrder] = useState<"input" | "cluster">("input");
const [triangle, setTriangle] = useState<"lower" | "full">("lower");
function reset() {
    setOrder("input");
    setTriangle("lower");
  }
return <>

      {isPreview ? (
        <div className="w-[540px]">
          <CorrelationMatrix {...DEMO} defaultOrder="cluster" activeCell={[2, 0]} ariaLabel="Asset correlations" />
        </div>
      ) : (
        <DemoColumn width={600}>
          <CorrelationMatrix {...DEMO} order={order} onOrderChange={setOrder} triangle={triangle} ariaLabel="Asset correlations" />
        </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>}