Color and Gradient Picker for React and Vue

npm i @orshot/colorshot

pnpm add @orshot/colorshot

yarn add @orshot/colorshot

bun add @orshot/colorshot

"use client";

import { useState } from "react";
import { ColorPicker } from "@orshot/colorshot/react";
import "@orshot/colorshot/styles.css";

export function FillPicker() {
  const [fill, setFill] = useState("linear-gradient(135deg, #3E5CEB 0%, #22C55E 100%)");

  return (
    <ColorPicker
      value={fill}
      onChange={setFill} // every frame while dragging
      onChangeComplete={(value) => save(value)} // once, when the change is done
    />
  );
}

<script setup>
import { ref } from "vue";
import { ColorPicker } from "@orshot/colorshot/vue";
import "@orshot/colorshot/styles.css";

const fill = ref("#3E5CEB");
</script>

<template>
  <ColorPicker v-model="fill" @change-complete="save" />
</template>

import { createPicker, parseColor, formatColor } from "@orshot/colorshot";

// The same store the React and Vue pickers use, safe in server code too
const picker = createPicker({
  value: "#3E5CEB",
  onChange: (value) => console.log(value),
});

picker.setHsva({ h: 140 });
picker.commit();

formatColor(parseColor("rgb(62 92 235 / 50%)").color, "hex"); // "#3e5ceb80"

import { useState } from "react";
import { ColorPicker } from "@orshot/colorshot/react";

export function Example() {
  const [value, setValue] = useState("linear-gradient(135deg, #3E5CEB 0%, #F97316 100%)");
  return <ColorPicker value={value} onChange={setValue} gradientPresets swatchSearch />;
}

import { useState } from "react";
import { ColorField } from "@orshot/colorshot/react";

export function Example() {
  const [fill, setFill] = useState("#3E5CEB");
  // takes every ColorPicker prop, plus placement, portal and a custom trigger
  return <ColorField label="Fill" value={fill} onChange={setFill} gradientPresets />;
}

import { useState } from "react";
import { ColorPicker } from "@orshot/colorshot/react";

// A linear gradient picker: drag the stops, Alt-drag to duplicate one,
// drag a stop off the bar to remove it. The angle dial sets the direction.
export function Example() {
  const [value, setValue] = useState("linear-gradient(90deg, #22C55E 0%, #3E5CEB 100%)");
  return <ColorPicker value={value} onChange={setValue} modes={["linear"]} />;
}

import { useState } from "react";
import { ColorPicker } from "@orshot/colorshot/react";

// A radial gradient picker: drag the center pad to move the center and switch
// between circle and ellipse. The size keyword and Repeating live in the ... menu.
export function Example() {
  const [value, setValue] = useState(
    "radial-gradient(circle at 30% 30%, #FDE68A 0%, #F97316 45%, #BE123C 100%)",
  );
  return <ColorPicker value={value} onChange={setValue} modes={["radial"]} />;
}

import { useState } from "react";
import { ColorPicker } from "@orshot/colorshot/react";

// A conic gradient picker: the angle dial sets the start angle,
// the center pad moves the center.
export function Example() {
  const [value, setValue] = useState(
    "conic-gradient(from 0deg at 50% 50%, #EF4444, #F59E0B, #22C55E, #3B82F6, #A855F7, #EF4444)",
  );
  return <ColorPicker value={value} onChange={setValue} modes={["conic"]} />;
}

import { useState } from "react";
import { ColorPicker } from "@orshot/colorshot/react";

// Backgrounds that must be a gradient: no Solid tab, preset gradients to start from.
export function Example() {
  const [value, setValue] = useState("linear-gradient(135deg, #F472B6 0%, #6366F1 100%)");
  return (
    <ColorPicker
      value={value}
      onChange={setValue}
      modes={["linear", "radial", "conic"]}
      defaultGradient="linear-gradient(90deg, #3E5CEB 0%, #22C55E 100%)"
      gradientPresets
    />
  );
}

<ColorPicker
  value={value}
  onChange={setValue}
  modes={["solid"]} // no gradient tabs
  alpha={false} // no opacity slider or field
  formats={["hex", "rgb", "hsl"]}
/>

import { useState } from "react";
import { ColorPicker } from "@orshot/colorshot/react";

// A text color on a white page: solid only, no transparency,
// and a WCAG contrast badge against the background.
export function Example() {
  const [value, setValue] = useState("#64748B");
  return (
    <ColorPicker
      value={value}
      onChange={setValue}
      modes={["solid"]}
      alpha={false}
      contrastWith="#FFFFFF"
    />
  );
}

import { useState } from "react";
import { ColorPicker } from "@orshot/colorshot/react";

// Perceptual editing: the area is OKLCH lightness by chroma, drawn in Display P3
// where the screen supports it. A dashed line marks the edge of sRGB.
export function Example() {
  const [value, setValue] = useState("oklch(0.62 0.2 265)");
  return (
    <ColorPicker
      value={value}
      onChange={setValue}
      modes={["solid"]}
      space="oklch"
      formats={["oklch", "hex", "rgb"]}
      outputFormat="oklch"
    />
  );
}

import { useState } from "react";
import { ColorPicker } from "@orshot/colorshot/react";

// Cmd/Ctrl+Z and Shift+Cmd/Ctrl+Z inside the picker. The header swatch splits
// into before and after once the value changes; click "before" to restore.
export function Example() {
  const [value, setValue] = useState("#F97316");
  return <ColorPicker value={value} onChange={setValue} history compare />;
}

<ColorPicker
  value={value}
  onChange={setValue}
  theme="dark"
  style={{
    "--cs-accent": "#E11D48",
    "--cs-radius": "20px",
    "--cs-radius-control": "10px",
  }}
/>