ColorTokenCard

Stable
WCAG 2.2 evidence
RTL

Documentation card for one colour token: a 96 px colour sample with an "Aa" text sample, then the name, token path, hex value and contrast note as text. The sample is decorative (aria-hidden); everything it shows is also written out, so colour is never the only identifier (WCAG 1.1.1, 1.3.1, 1.4.1). Codes stay left-to-right in RTL layouts. Presentational: renders in React Server Components. Consumer duties: accurate contrast notes (measure them; the card does not compute them) and name wording. For product UI, use Swatch instead.

import { ColorTokenCard } from "@nexera-ui/react";

Loading example…

4
examples: 6
props: 0
live controls: 1
platform: 6
WCAG criteria: 0
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

Generated code

import { ColorTokenCard } from "@nexera-ui/react";

<ColorTokenCard />

Examples 3

The same examples as Storybook, rendered live. Open Code to copy one.

Palette

Theme-aware sample: color takes a CSS variable, so the sample follows Light and Dark; sampleColor sets the "Aa" ink. The cards wrap onto new rows in narrow containers.

Loading example…

app.tsx

import { ColorTokenCard } from "@nexera-ui/react";

export function Palette() {
  return (
    <ul className="m-0 flex list-none flex-wrap gap-4 p-0">
      <li>
        <ColorTokenCard
          name="Brand primary"
          token="brand/primary"
          hex="#04855D"
          color="var(--color-brand-primary)"
          sampleColor="var(--color-brand-on-primary)"
          contrast="4.6:1 on white"
        />
      </li>
      <li>
        <ColorTokenCard
          name="Info solid"
          token="status/info/solid"
          hex="#2563EB"
          contrast="5.2:1 on white"
        />
      </li>
      <li>
        <ColorTokenCard
          name="Warning solid"
          token="status/warning/solid"
          hex="#D97706"
          contrast="3.2:1 on white"
        />
      </li>
      <li>
        <ColorTokenCard name="Raw yellow" hex="#FDE047" />
      </li>
    </ul>
  );
}

Long content

Long names and token paths wrap instead of truncating.

Loading example…

app.tsx

import { ColorTokenCard } from "@nexera-ui/react";

<ColorTokenCard
  name="Emerald 600 for primary buttons, links and the selected navigation item"
  token="semantic/action/primary/background/default"
  hex="#04855D"
  contrast="4.6:1 on white, 3.9:1 on the page background"
/>;

Right to left

Right-to-left: the text aligns to the start (right); token and hex stay left-to-right.

Loading example…

app.tsx

import { ColorTokenCard } from "@nexera-ui/react";

<ColorTokenCard name="زمردي ٦٠٠" token="brand/primary" hex="#04855D" contrast="٤٫٦:١ على الأبيض" />;

Props 6

name*Nexera

ReactNode

Name of the colour. Wraps.

hex*Nexera

string

Hex value, shown as text so the colour is never identified by its look alone (WCAG 1.4.1). Also the sample fill unless color is set, and used to pick the ink of the "Aa" sample.

tokenNexera

ReactNode

Design token path. Shown when provided.

contrastNexera

ReactNode

Contrast note. Shown when provided.

colorNexera

string

CSS colour of the sample fill, for example var(--color-brand-primary) so the card follows the theme. Inline style, because it is data.

sampleColorNexera

string

CSS colour of the "Aa" sample. By default the light or dark ink with the higher contrast on hex is used.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

3 direct · 3 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.3Contrast (Minimum)Level AA · supporting test
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<ColorTokenCard className="shadow-sm" />

Used in blocks

No block uses ColorTokenCard yet.

Theme studio

ColorTokenCard

Try every prop. Copy the code.

Examples 3

Palette

Long content

Right to left

Props 6

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components