maud-ui64 components

Swatch

Sizes

Small
32×32
Medium
56×56
Large
80×80

Raw values

Any valid CSS colour string. Click a chip to copy the value.

Primary
#2563eb
Success
#16a34a
Warning
#f59e0b
Danger
#dc2626
Fuchsia
hsl(289 65% 54%)
Translucent
rgba(37,99,235,0.35)

Design tokens (live)

Each chip reads var(--mui-*) at paint time, so toggling the gallery theme flips the grid.

Background
--mui-bg
Card surface
--mui-bg-card
Input surface
--mui-bg-input
Body text
--mui-text
Muted text
--mui-text-muted
Subtle text
--mui-text-subtle
Border
--mui-border
Border · hover
--mui-border-hover
Border · focus
--mui-border-focus
Accent
--mui-accent
Accent text
--mui-accent-text
Danger
--mui-danger

Scale ramps (Tailwind-style)

Horizontal ramps from 50 to 950 — click any tone to copy its hex.

slate
50
100
200
300
400
500
600
700
800
900
950
blue
50
100
200
300
400
500
600
700
800
900
950
emerald
50
100
200
300
400
500
600
700
800
900
950
rose
50
100
200
300
400
500
600
700
800
900
950
amber
50
100
200
300
400
500
600
700
800
900
950

Usage

use maud_ui::primitives::swatch;

// Raw colour — any valid CSS colour string
let chip = swatch::render(swatch::Props {
    label: "Primary".into(),
    sublabel: Some("#2563eb".into()),
    mode: swatch::Mode::Raw("#2563eb".into()),
    size: swatch::Size::Md,
    copyable: true,
});

// Design token — reads var(--mui-accent) live, flips with data-theme
let token = swatch::render(swatch::Props {
    label: "Accent".into(),
    sublabel: Some("--mui-accent".into()),
    mode: swatch::Mode::Token("mui-accent".into()),
    ..Default::default()
});

// Tailwind-style ramp (50..950)
let ramp = swatch::render_scale("blue", &swatch::tailwind_ramp("blue"));
← Back to Gallery