Wheel

Anatomy

import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/wheel";
 
<ChromaPanel modes={["wheel"]} />;

The disc is sized by --cp-disc-size, and grows when the panel is widened with the green window control.

Demo

Hex

Loading…

chroma-panel-wheel-demo.tsx

"use client";
 
import { ChromaPanel } from "chroma-panel";
 
export default function ChromaPanelWheelDemo() {
  return (
    <ChromaPanel
      defaultValue="#3366cc"
      modes={["wheel"]}
      showTitleBar={false}
      injectStyles={false}
    />
  );
}

Mode id

'wheel'. List it in modes to show the tab, and in the order you want the tabs.