Glass Badge for React

Preview

LiveNewBetaPausedFailedDraft

Demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Badge

pnpm dlx shadcn@4.14.1 add @glassyui/glass-badge

What this installs5 files, 1 package

Direct registry declarations

These values belong to @glassyui/glass-badge itself in registry.json.

Package dependencies

clsx

Registry dependencies

@glassyui/glass-provider

File targets

components/glassyui/glass-badge.tsx

Complete installed closure

This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.

Package dependencies

clsx

Installed files

components/glassyui/glass-badge.tsx
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

import { GlassBadge } from "@/components/glassyui/glass-badge";

export function BadgeDemo() {
  return <GlassBadge tone="green" dot>Live</GlassBadge>;
}

Examples

Tones

<GlassBadge>Draft</GlassBadge>
<GlassBadge tone="blue">New</GlassBadge>
<GlassBadge tone="orange">Beta</GlassBadge>
<GlassBadge tone="red">3 failed</GlassBadge>
<GlassBadge tone="blue">Pro</GlassBadge>

API

GlassBadge

Forward-ref span with a tinted glass fill.

GlassBadgeProps

Native span props plus dot and tone.

GlassBadgeTone

neutral, blue, green, orange, red, or purple.

dot

Adds a leading status dot in the tone colour.

Notes

Rendering

A plain span with no client JavaScript, so it works in server components.

Contrast

Tone text colours are tuned for 4.5:1 contrast on both themes.

Accessibility

Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.

Performance

Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.