Color Preview

CSS lines with inline color swatch squares next to each hex value.

1--primary:  #f43f5e;
2--accent:  #8b5cf6;
3--surface:  #0ea5e9;

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Editor26 } from "@/components/beste/piece/editor26";

<Editor26
  colors={[
    {
      "key": "--primary",
      "value": "#f43f5e"
    },
    {
      "key": "--accent",
      "value": "#8b5cf6"
    },
    {
      "key": "--surface",
      "value": "#0ea5e9"
    }
  ]}
/>