Glass Switch for React

Preview

Notifications

Autosave

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 Switch

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

What this installs7 files, 2 packages

Direct registry declarations

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

Package dependencies

@radix-ui/react-switch
clsx

Registry dependencies

@glassyui/glass-provider

File targets

components/glassyui/glass-switch.tsx
components/glassyui/lib/merge-refs.ts
components/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-switch
clsx

Installed files

components/glassyui/glass-switch.tsx
components/glassyui/lib/merge-refs.ts
components/glassyui/lib/liquid-motion.ts
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

import { GlassSwitch } from "@/components/glassyui/glass-switch";

export function SwitchDemo() {
  return <GlassSwitch aria-label="Notifications" defaultChecked />;
}

Examples

With a visible label

<label className="flex items-center justify-between gap-4">
  Autosave
  <GlassSwitch />
</label>

Small

<GlassSwitch aria-label="Mute" size="sm" />

API

GlassSwitch

Forward-ref Radix Switch root with a glass thumb.

GlassSwitchProps

Radix Switch root props plus size.

size

Track size: sm or md. Defaults to md.

checked / defaultChecked

Controlled or uncontrolled on state.

onCheckedChange

Called 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.