Violin plot is a production-ready charts component from BJORK UI, packaged for shadcn registries.
Loading preview...
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { ViolinPlot, createRegionGroups, type ViolinMode } from "@/components/ui/bjork-violin-plot";
import { DemoColumn } from "@/components/ui/bjork-violin-plot-utils/app-charts-_demo-controls";
const GROUPS = createRegionGroups(21);
const DOMAIN: [number, number] = [0, 600];
function SourceDemo(){
const isPreview = false;
const [mode, setMode] = useState<ViolinMode>("violin");
const reset = () => {
setMode("violin");
};
return <>
{isPreview ? (
<div className="w-[720px]">
<ViolinPlot groups={GROUPS} yDomain={DOMAIN} highlightId="ap" unit="ms" height={380} ariaLabel="Response time by region" />
</div>
) : (
<DemoColumn width={800}>
<ViolinPlot groups={GROUPS} yDomain={DOMAIN} mode={mode} onModeChange={setMode} unit="ms" height={360} ariaLabel="Response time by region" />
</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>}