UI Skillbook
2

Color Swatch Picker

A row of color or image swatches for choosing one option from a palette your app defines.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-color-swatch-picker and follow the Siteplane Color Swatch Picker skill it prints for this task.

Paste this into your agent.

Color Swatch Picker chooses from a fixed set: label colors, avatar backgrounds, theme presets or images. The value is the option key, so your data does not depend on the CSS color.

Install

bashnpx shadcn@4.18.0 add @siteplane/color-swatch-picker

Import it from @/siteplane/components/color-swatch-picker. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Color Picker: Pick Color Picker when any color is allowed, or add it as the last swatch for a custom choice.
  • vs Radio Group: Pick Radio Group when words describe the options better than color.
  • vs Select: Pick Select when the palette is too large to show as swatches.

Rules

  • Give each option a label and unique value. Screen readers announce the label.
  • Store the option key from onValueChange instead of the CSS color.
  • Use indicator="ring" for image swatches so the check does not cover the picture.
  • Place it in a Field with a name and required so FieldError can explain a missing choice.
  • Change swatch shape through the provider radius instead of custom classes.

Reference

  • Color Swatch Picker docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Date & color. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-color-swatch-picker

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

12 Principles of Animationby raphaelsalaja

Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.

MotionExternalGitHub stars: 42

Animation Vocabularyby emilkowalski

Sharpen motion language so animation choices feel deliberate and consistent.

MotionExternalGitHub stars: 51.4K

Antfu Designby antfu

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

LayoutExternalGitHub stars: 6K

Apple Designby emilkowalski

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

MotionExternalGitHub stars: 51.4K

Back to Siteplane UI