Color field

Accepts a hex color, or one color channel as a number.

Accent color

color-field-demo.tsx

"use client";import { ColorField } from "@/components/vip-ui/color-field";export function ColorFieldDemo() {  return (    <ColorField      label="Accent color"      defaultValue="#4567d4"      className="w-full max-w-xs"    />  );}

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-field.json

Single channel

Set colorSpace and channel to edit one channel as a number.

Hue

color-field-channel-demo.tsx

"use client";import { ColorField } from "@/components/vip-ui/color-field";export function ColorFieldChannelDemo() {  return (    <ColorField      label="Hue"      colorSpace="hsl"      channel="hue"      defaultValue="hsl(225, 60%, 55%)"      className="w-full max-w-xs"    />  );}

Disabled

Theme color

color-field-disabled-demo.tsx

"use client";import { ColorField } from "@/components/vip-ui/color-field";export function ColorFieldDisabledDemo() {  return (    <ColorField      label="Theme color"      defaultValue="#a96c22"      isDisabled      className="w-full max-w-xs"    />  );}

Controlled value

Also install Color swatch.

Brand color

color-field-controlled-demo.tsx

"use client";import { useState } from "react";import { type Color, parseColor } from "react-aria-components";import { ColorField } from "@/components/vip-ui/color-field";import { ColorSwatch } from "@/components/vip-ui/color-swatch";export function ColorFieldControlledDemo() {  const [color, setColor] = useState<Color | null>(parseColor("#228571"));  return (    <div className="flex w-full max-w-xs items-end gap-3">      <ColorField        label="Brand color"        value={color}        onChange={setColor}        className="min-w-0 flex-1"      />      <ColorSwatch color={color ?? undefined} className="size-12 rounded-lg" />    </div>  );}

Sizes

color-field-sizes-demo.tsx

"use client";import { ColorField } from "@/components/vip-ui/color-field";export function ColorFieldSizesDemo() {  return (    <div className="grid w-full max-w-xs gap-3">      <ColorField size="xs" aria-label="Accent color" defaultValue="#4567d4" />      <ColorField size="sm" aria-label="Accent color" defaultValue="#4567d4" />      <ColorField size="md" aria-label="Accent color" defaultValue="#4567d4" />      <ColorField aria-label="Accent color" defaultValue="#4567d4" />    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria ColorField (opens in a new tab).

size: "xs" | "sm" | "md" | "lg" | "xl" = "lg": Sets the size of the field.
label: string: Label above the field. Without a label, pass aria-label.
description: string: Help text below the field.