Contrast Orb

beta

A picture of contrast in light and dark: an orb cut into a light half and a dark half, with letters on each.

Preview

brand tone, other letters

no dots, narrow container

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```
3. Add the illustration. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.
```
npx shadcn@latest add @txbrendan/contrast-orb
```

A feature section about readable color, like a theme checked for contrast in light and dark.
Put it in a Feature Grid item's `illustration`, or a Bento Card's `preview`.
Keep `sample` to two or three letters, so it fits each half.
Write `label` as one sentence that says what the picture shows. Screen readers hear it in place of the drawing.

A real light and dark switch. Use the mode control in your app.
Proof of contrast. A picture only sets the mood. Show the checked numbers in text.

sample
The letters on each half.
string · default "Aa"
label
What the picture says, read out in its place.
string · default a sentence about the orb
tone
The color of the moon on the ring and its glow.
"neutral" | "brand" | "danger" | "success" | "warning" · default "neutral"
pattern
A field of dots behind the orb.
boolean · default true
className
Extra classes on the root.
string

Prop	Type	Default	What it does
sample	string	"Aa"	The letters on each half.
label	string	a sentence about the orb	What the picture says, read out in its place.
tone	"neutral" \| "brand" \| "danger" \| "success" \| "warning"	"neutral"	The color of the moon on the ring and its glow.
pattern	boolean	true	A field of dots behind the orb.
className	string	-	Extra classes on the root.

The root is one image, named by `label`. The drawing and its letters are hidden from screen readers.
Nothing inside takes focus.
On hover the moon's glow fades up. It is a fade, so it stays with reduced motion, and it stops when motion is off.

<ContrastOrb />

<ContrastOrb tone="brand" label="Every color pair is checked in light and dark." />