Color swatch

Shows a sample of a color.

color-swatch-basic-demo.tsx

import { ColorSwatch } from "@/components/vip-ui/color-swatch";export function ColorSwatchBasicDemo() {  return <ColorSwatch color="#2563eb" colorName="Ocean" />;}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-color-swatch.json

Named palette

Set colorName for the accessible name. Without it, the name is generated, such as "vibrant red".

Ocean

Pine

Coral

Plum

color-swatch-demo.tsx

import { ColorSwatch } from "@/components/vip-ui/color-swatch";const colors = [  { name: "Ocean", value: "#2563eb" },  { name: "Pine", value: "#15803d" },  { name: "Coral", value: "#ea580c" },  { name: "Plum", value: "#9333ea" },];export function ColorSwatchDemo() {  return (    <div className="flex flex-wrap gap-4">      {colors.map(({ name, value }) => (        <div          key={name}          className="grid justify-items-center gap-2 text-xs text-muted-foreground"        >          <ColorSwatch color={value} colorName={name} />          <span>{name}</span>        </div>      ))}    </div>  );}

Transparency

Ocean 100%

Ocean 60%

Ocean 20%

color-swatch-transparency-demo.tsx

import { ColorSwatch } from "@/components/vip-ui/color-swatch";const colors = [  { name: "Ocean 100%", value: "rgb(37, 99, 235)" },  { name: "Ocean 60%", value: "rgba(37, 99, 235, 0.6)" },  { name: "Ocean 20%", value: "rgba(37, 99, 235, 0.2)" },];export function ColorSwatchTransparencyDemo() {  return (    <div className="flex flex-wrap gap-4">      {colors.map(({ name, value }) => (        <div          key={name}          className="grid justify-items-center gap-2 text-xs text-muted-foreground"        >          <ColorSwatch color={value} colorName={name} />          <span>{name}</span>        </div>      ))}    </div>  );}

API reference

Color swatch takes the props of React Aria ColorSwatch (opens in a new tab).