Color

PreviewCopy Anchor Link

UsageCopy Anchor Link

import { z } from 'zod'
import { AutoForm } from '@vitnode/core/components/form/auto-form'
import { AutoFormColor } from '@vitnode/core/components/form/fields/color'

const formSchema = z.object({
  color: z.string().default('hsl(215, 81%, 52%)'),
})

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'color',
      component: props => <AutoFormColor {...props} label="Category color" />,
    },
  ]}
/>

Preset paletteCopy Anchor Link

A default swatch plus seven hues and gray, in up to three tones. The default stores "" and renders in the theme's text color. Every tone keeps 3:1 contrast on light and dark backgrounds, and a unit test enforces it.

For the palette alone, use ColorPresetPicker. The values live in @vitnode/core/components/ui/color-presets.

import { ColorPresetPicker } from '@vitnode/core/components/ui/color-preset-picker'

<ColorPresetPicker onChange={setColor} value={color} />

The swatches are one radio group, so arrow keys move between them.

Output formatCopy Anchor Link

Presets and the picker store HSL, like hsl(215, 81%, 52%). The text input stores any CSS color you type. Hex, rgb(), hsl() and oklch() move the picker; anything else parks it on black.

react-colorful loads only when the popover opens.

ClearingCopy Anchor Link

allowRemoveColor adds a "Remove" button that sets "". The preview has it on.

Editor text colorCopy Anchor Link

The editor's text color action uses the same preset palette, with no free-form picker. Its popover ends with a "Remove color" button.

PropsCopy Anchor Link

Other props, like disabled, go to the trigger button.