Controls
Glass Button
A slab of glass resting just above the page that sets down when pressed and lights up where you press.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-buttonnpx shadcn@4.14.1 add @glassyui-native/glass-buttonPreview
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-buttonWhat this installs9 files, 2 packages
Direct registry declarations
These values belong to @glassyui/glass-button itself in registry.json.
Package dependencies
@radix-ui/react-slotclsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-button.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/refraction-map.tscomponents/glassyui/lib/use-refraction-filter.tsxcomponents/glassyui/lib/scene-context.ts
Complete installed closure
This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.
Package dependencies
@radix-ui/react-slotclsx
Installed files
components/glassyui/glass-button.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/refraction-map.tscomponents/glassyui/lib/use-refraction-filter.tsxcomponents/glassyui/lib/scene-context.tscomponents/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-buttonnpx expo install --fixUsage
import { GlassButton } from "@/components/glassyui/glass-button";
export function ButtonDemo() {
return <GlassButton>Save changes</GlassButton>;
}import { useState } from 'react';
import { View } from 'react-native';
import { GlassButton } from '@/components/glassyui/glass-button';
export default function ButtonExample() {
const [saved, setSaved] = useState(false);
return (
<View style={{ flexDirection: 'row', gap: 12 }}>
<GlassButton variant="prominent" onPress={() => setSaved(true)}>
{saved ? 'Saved' : 'Save'}
</GlassButton>
<GlassButton disabled={!saved} onPress={() => setSaved(false)}>
Undo
</GlassButton>
</View>
);
}
Examples
<div className="flex gap-3">
<GlassButton variant="prominent">Prominent</GlassButton>
<GlassButton variant="primary">Primary</GlassButton>
<GlassButton variant="soft">Soft</GlassButton>
<GlassButton variant="ghost">Ghost</GlassButton>
</div><GlassButton asChild variant="prominent">
<a href="/pricing">See pricing</a>
</GlassButton>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.
GlassButtonForward-ref native button with owned glass interaction state.
GlassButtonPropsNative button props plus Glassy UI material options.
ButtonVariantExported primary, prominent, soft, or ghost visual-intent type.
ButtonSizeExported sm, md, or lg size type.
variantVisual intent: primary (clear glass, the default), prominent (blue glass for the main action: it tints whatever lies behind it and keeps white text at 4.5:1), soft, or ghost.
asChildRenders the single child element, such as a link, with the button material. Links cannot be disabled.
sizeControl size: sm, md, or lg.
presetMaterial preset applied to the button surface.
lensChromium lens: the rim bends and splits the page behind it. On by default for every variant except ghost.
Notes
Motion
The glass rests just above the page, lit from above. A pointer lowers it and a press sets it down, so its shadow draws in under it, and light spreads from the point you press. Reduced motion moves it at once and drops the light.
Glass Scene
Inside a Glass Scene the canvas draws the button as real glass that bends the backdrop.
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.