Feedback
Glass Badge
A small tinted glass label for status, counts and categories.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-badgenpx shadcn@4.14.1 add @glassyui-native/glass-badgePreview
Demos ready. Update 0.
This preview runs the React version. In an app, iOS 26 and later draw the React Native version with the system’s own Liquid Glass. See it on a phone.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-badgeWhat 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.tsxcomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
First add the @glassyui-native mapping to components.json as shown in the Expo guide. Then add the component and match its packages to your Expo SDK:
npx shadcn@4.14.1 add @glassyui-native/glass-badgenpx expo install --fixUsage
import { GlassBadge } from "@/components/glassyui/glass-badge";
export function BadgeDemo() {
return <GlassBadge tone="green" dot>Live</GlassBadge>;
}import { View } from 'react-native';
import { GlassBadge } from '@/components/glassyui/glass-badge';
export default function BadgeExample() {
return (
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
<GlassBadge dot tone="green">
Online
</GlassBadge>
<GlassBadge tone="blue">New</GlassBadge>
<GlassBadge tone="red">3 unread</GlassBadge>
</View>
);
}
Examples
<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
The React Native version takes the same props under React Native’s names: onPress for onClick and style for className. The Expo guide lists what else differs.
GlassBadgeForward-ref span with a tinted glass fill.
GlassBadgePropsNative span props plus dot and tone.
GlassBadgeToneneutral, blue, green, orange, red, or purple.
dotAdds 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.