Controls
Glass Switch
An on/off switch whose knob turns to glass and stretches as it slides.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-switchnpx shadcn@4.14.1 add @glassyui-native/glass-switchPreview
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-switchWhat this installs7 files, 2 packages
Direct registry declarations
These values belong to @glassyui/glass-switch itself in registry.json.
Package dependencies
@radix-ui/react-switchclsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-switch.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/liquid-motion.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-switchclsx
Installed files
components/glassyui/glass-switch.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/liquid-motion.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-switchnpx expo install --fixUsage
import { GlassSwitch } from "@/components/glassyui/glass-switch";
export function SwitchDemo() {
return <GlassSwitch aria-label="Notifications" defaultChecked />;
}import { useState } from 'react';
import { Text, View } from 'react-native';
import { useGlassTheme } from '@/components/glassyui/glass-provider';
import { GlassSwitch } from '@/components/glassyui/glass-switch';
export default function SwitchExample() {
const { colors } = useGlassTheme();
const [notifications, setNotifications] = useState(true);
return (
<View style={{ alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ color: colors.foreground, fontSize: 16 }}>Notifications</Text>
<GlassSwitch
accessibilityLabel="Notifications"
checked={notifications}
onCheckedChange={setNotifications}
/>
</View>
);
}
This example also uses Glass Provider. Install everything it uses:
npx shadcn@4.14.1 add @glassyui-native/glass-switch @glassyui-native/glass-providerExamples
<label className="flex items-center justify-between gap-4 select-none">
Autosave
<GlassSwitch />
</label><GlassSwitch aria-label="Mute" size="sm" />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.
GlassSwitchForward-ref Radix Switch root with a glass thumb.
GlassSwitchPropsRadix Switch root props plus size.
sizeTrack size: sm or md. Defaults to md.
checked / defaultCheckedControlled or uncontrolled on state.
onCheckedChangeCalled with the next checked value.
Notes
Accessibility
Renders a button with role switch. Name it with aria-label or wrap it in a visible label.
Motion
The knob turns to clear glass while pressed and stretches like a drop as it slides. Reduced motion keeps the colour change and drops the travel.
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.