Display@knitui/components

ColorSwatch

ColorSwatch displays a solid color circle or square. color accepts any valid CSS color string. size controls width and height with token keys, numeric pixels, or a CSS string. radius controls the rounding (defaults to pill). An inset shadow overlay keeps the swatch edge visible against matching backgrounds.

WebiOSAndroid1 style slots3 own props9 examples

Stories Source Tests Open in Storybook

import { ColorSwatch } from "@knitui/components";

Playground

Loading playground…

color

sizeWidth and height of the swatch. Standard keys resolve against the size scale; numbers and CSS strings are also supported.

radiusBorder radius token or number; 9999 produces a pill/circle, 0 a square.

withShadowAdds an inset shadow overlay to define the swatch edge.

true

Playground

<ColorSwatch
  color="#1971c2"
  size="md"
  withShadow
/>

Examples

Colors

Multiple color swatches side by side — the most common use-case.

Loading example…

ColorsSource Storybook

Sizes

Full seven-step token size scale.

Loading example…

SizesSource Storybook

Radii

Border radius from square (0) to fully rounded pill (9999).

Loading example…

RadiiSource Storybook

Shadows

The inherited shadow elevation ladder, from xs to xl — distinct from the withShadow inset edge-ring; this drops a real elevation shadow under the swatch.

Loading example…

ShadowsSource Storybook

No Shadow

Shadow overlay disabled — the inset ring that outlines the swatch is removed.

Loading example…

No ShadowSource Storybook

With Children

Children rendered inside the swatch — useful for check marks or labels.

Loading example…

With ChildrenSource Storybook

Palette Strip

A palette strip — large swatches at square radius to act as color cells.

Loading example…

Palette StripSource Storybook

Styles

Per-slot styles targets individual parts — here the inset ring overlay.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`color` required	`string`	`#1971c2`	Any valid CSS color string to display.
`children`	`ReactNode`	—	Content rendered inside the swatch.
`disabled` system	`boolean \| undefined`	—
`radius` system	`string \| number \| undefined` 0 · xs · sm · md · lg · xxl · 9999	`9999 (pill)`	Border radius token or number; 9999 produces a pill/circle, 0 a square.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| (string & {}) \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`"md"`	Width and height of the swatch. Standard keys resolve against the size scale; numbers and CSS strings are also supported.
`styles` system	`SlotStyles<ColorSwatchStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`withShadow`	`boolean \| undefined`	`true`	Adds an inset shadow overlay to define the swatch edge.

Style slots

Every part of ColorSwatch can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`overlay`	`styles={{ overlay: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 497 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.