Free

Tones TypeScript helper for React

Q: How do I install Tones?

Run npx wingo-ui@latest add tones. With shadcn, run npx shadcn@latest add https://wingo-ui.com/r/tones.json.

One way to color a React component: a tone or any CSS color becomes five CSS variables every variant paints with.

Each row is one tone painted three ways: a solid fill, a soft tint and an outline. Pick any color in the playground to see colorVars build the same set from it, with readable text on both themes.

Tones is a free React helper in the React hooks and utilities category, written in TypeScript for React 19. It installs as source with npx wingo-ui@latest add tones.

Add to a project

Requirements: React 19, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add tones

Usage

Import toneClasses from @/lib/tones.

import { colorVars, toneClasses, type Tone } from "@/lib/tones"
import { cn } from "@/lib/utils"

export function Badge({ tone = "neutral", color, className, ...props }: React.ComponentProps<"span"> & { tone?: Tone; color?: string }) {
  return (
    <span
      data-slot="badge"
      className={cn(toneClasses[tone], "rounded-full bg-(--tone-soft) px-2 py-0.5 text-xs font-medium text-(--tone-soft-foreground)", className)}
      style={colorVars(color)}
      {...props}
    />
  )
}

API

colordefault "#7C3AED"
string
colorVars(color): any CSS color turned into the five --tone-* vars, for a component's color prop.
toneClasses
Record<"neutral" | "brand" | "success" | "warning" | "danger" | "info", string>
Classes that set --tone, --tone-foreground, --tone-soft, --tone-soft-foreground and --tone-border from the design tokens.

Parts

colorVars
function
The same vars as an inline style. The text on the fill turns black or white by lightness; soft text mixes toward the foreground. Signature: (color?: string) => CSSProperties | undefined.
TONES
constant
Every tone in order, and a guard that turns an unknown string into a tone. Type: Tone[].
toTone
function
Every tone in order, and a guard that turns an unknown string into a tone. Signature: (value: unknown, fallback?: Tone) => Tone.

Examples

Invoice status badges

One badge component; toneClasses maps paid, pending, overdue and draft to success, warning, danger and neutral.

Brand colors

colorVars turns any hex color into the same five variables, with text that stays readable on a light amber.

Dependencies

No dependencies beyond React.

Files

lib/tones.ts

FAQ

Is the Tones helper free?

Yes. The source is free and needs no account: copy it from the Code tab or install it with the CLI.

How do I install Tones?

Run npx wingo-ui@latest add tones. With shadcn, run npx shadcn@latest add https://wingo-ui.com/r/tones.json.

Used in

Listing card Badge Gauge Avatar Upload Hero Header Bottom Tab Bar Onboarding Flow Calendar Slider Favorite button Tooltip Video Player

and 239 more.

More React hooks and utilities

UIProviderlib useClipboardhook useConsenthook useControllableStatehook useCooldownhook useDebouncehook

All 36 React hooks and utilities

Articles using this component

shadcn Tailwind v4 Migration: Step by Step From v3
Next.js and Tailwind CSSNov 6, 202610 min read
Claude Code Design System: Make 50 Screens Match
Building UI with AI agentsOct 16, 202612 min read
Tailwind v4 Dark Mode: Class Toggle, Tokens, next-themes
Next.js and Tailwind CSSOct 13, 20269 min read
Tailwind v4 Design Tokens: Colors, Dark Mode and Contrast
Next.js and Tailwind CSSOct 9, 202620 min read

Free

Tones TypeScript helper for React

v1.0.0Added in 1.0.0

One way to color a React component: a tone or any CSS color becomes five CSS variables every variant paints with.

Each row is one tone painted three ways: a solid fill, a soft tint and an outline. Pick any color in the playground to see colorVars build the same set from it, with readable text on both themes.

Tones is a free React helper in the React hooks and utilities category, written in TypeScript for React 19. It installs as source with npx wingo-ui@latest add tones.

Add to a project

Requirements: React 19, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add tones

Usage

Import toneClasses from @/lib/tones.

import { colorVars, toneClasses, type Tone } from "@/lib/tones"
import { cn } from "@/lib/utils"

export function Badge({ tone = "neutral", color, className, ...props }: React.ComponentProps<"span"> & { tone?: Tone; color?: string }) {
  return (
    <span
      data-slot="badge"
      className={cn(toneClasses[tone], "rounded-full bg-(--tone-soft) px-2 py-0.5 text-xs font-medium text-(--tone-soft-foreground)", className)}
      style={colorVars(color)}
      {...props}
    />
  )
}

API

colordefault "#7C3AED"
string
colorVars(color): any CSS color turned into the five --tone-* vars, for a component's color prop.
toneClasses
Record<"neutral" | "brand" | "success" | "warning" | "danger" | "info", string>
Classes that set --tone, --tone-foreground, --tone-soft, --tone-soft-foreground and --tone-border from the design tokens.

Parts

colorVars
function
The same vars as an inline style. The text on the fill turns black or white by lightness; soft text mixes toward the foreground. Signature: (color?: string) => CSSProperties | undefined.
TONES
constant
Every tone in order, and a guard that turns an unknown string into a tone. Type: Tone[].
toTone
function
Every tone in order, and a guard that turns an unknown string into a tone. Signature: (value: unknown, fallback?: Tone) => Tone.

Examples

Invoice status badges

One badge component; toneClasses maps paid, pending, overdue and draft to success, warning, danger and neutral.

Brand colors

colorVars turns any hex color into the same five variables, with text that stays readable on a light amber.

Dependencies

No dependencies beyond React.

Files

lib/tones.ts

FAQ

Is the Tones helper free?

Yes. The source is free and needs no account: copy it from the Code tab or install it with the CLI.

How do I install Tones?

Run npx wingo-ui@latest add tones. With shadcn, run npx shadcn@latest add https://wingo-ui.com/r/tones.json.

Used in

Listing card Badge Gauge Avatar Upload Hero Header Bottom Tab Bar Onboarding Flow Calendar Slider Favorite button Tooltip Video Player

and 239 more.

More React hooks and utilities

UIProviderlib useClipboardhook useConsenthook useControllableStatehook useCooldownhook useDebouncehook

All 36 React hooks and utilities

Articles using this component

shadcn Tailwind v4 Migration: Step by Step From v3
Next.js and Tailwind CSSNov 6, 202610 min read
Claude Code Design System: Make 50 Screens Match
Building UI with AI agentsOct 16, 202612 min read
Tailwind v4 Dark Mode: Class Toggle, Tokens, next-themes
Next.js and Tailwind CSSOct 13, 20269 min read
Tailwind v4 Design Tokens: Colors, Dark Mode and Contrast
Next.js and Tailwind CSSOct 9, 202620 min read

Tones TypeScript helper for React

Add to a project

Usage

API

Parts

colorVars

TONES

toTone

Examples

Invoice status badges

Brand colors

Dependencies

Files

FAQ

Is the Tones helper free?

How do I install Tones?

See also

Used in

More React hooks and utilities

Articles using this component

Tones TypeScript helper for React

Add to a project

Usage

API

Parts

colorVars

TONES

toTone

Examples

Invoice status badges

Brand colors

Dependencies

Files

FAQ

Is the Tones helper free?

How do I install Tones?

See also

Used in

More React hooks and utilities

Articles using this component