Glass Control Center
A frosted-glass control centre with switches, now playing, and brightness and volume sliders.
Overview
Four tiles of frosted glass over whatever sits behind them: a 2×2 cluster of round switches, a now-playing tile with transport controls, and two tall sliders whose fill rises from the bottom.
The glass is layered rather than a single blur: backdrop blur and saturation, a hairline edge, an inner top highlight and a soft specular light that follows the pointer across the group. Clear lets more of the scene through; Smoke darkens it for busy photographs.
Glass needs something rich behind it. Put it over a photograph, video or a colourful surface; over a flat colour it reads as a plain panel.
When to use
- Media and device controls over a photograph, video or rich hero.
- Settings quick panels in apps with an expressive background.
When not to use
- Over flat colour or dense text, where glass adds blur without depth.
- Dense admin settings: use a settings list.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/glass-control-center.jsonnpx shadcn@latest add https://sundaeui.dev/r/glass-control-center.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/glass-control-center.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/glass-control-center.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy glass-control-center.tsx and glass-control-center.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { GlassControlCenter } from '@/components/sundae/glass-control-center'
<div style={{ backgroundImage: 'url(/hero.jpg)' }}>
<GlassControlCenter
tint="clear"
track={{ title: 'Golden Hour', artist: 'Field Notes', artwork: '/cover.jpg' }}
onToggle={(id, on) => setSetting(id, on)}
onVolumeChange={setVolume}
/>
</div>Props
| Prop | Type | Default |
|---|---|---|
togglesRound switches in the 2×2 cluster. Defaults to Wi-Fi, Bluetooth, Airplane mode and Focus. | { id, label, icon, on? }[] | — |
trackNow-playing tile content. | { title, artist, artwork? } | — |
brightness / volumeInitial slider values, 0–100. | number | 68 / 42 |
onToggleCalled when a switch changes. | (id, on) => void | — |
onBrightnessChange / onVolumeChangeCalled as a slider moves. | (v: number) => void | — |
tintGlass tint. | 'clear' | 'smoke' | 'clear' |
blurBackdrop blur in pixels. | number | 28 |
Accessibility
- Switches are buttons with role="switch" and aria-checked; transport buttons are labelled, play/pause uses aria-pressed.
- Sliders use role="slider" with aria-valuenow and a percentage value text; arrow keys step by 2 (10 with Shift), Home/End jump.
- Text sits on a tint layer so it stays legible over bright photographs; reduced motion removes transitions.
Customization
- Every colour is a CSS custom property on .sd-gcc (--gcc-glass, --gcc-edge, --gcc-on…).
- Change the grid in .sd-gcc to rearrange or add tiles; each tile is a .gcc-tile.
FAQ
- Is Glass Control Center free?
- Glass Control Center is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Glass Control Center?
- Run npx shadcn@latest add https://sundaeui.dev/r/glass-control-center.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Glass Control Center support keyboard and screen readers?
- Switches are buttons with role="switch" and aria-checked; transport buttons are labelled, play/pause uses aria-pressed. Sliders use role="slider" with aria-valuenow and a percentage value text; arrow keys step by 2 (10 with Shift), Home/End jump.
- Does Glass Control Center respect reduced motion?
- Text sits on a tint layer so it stays legible over bright photographs; reduced motion removes transitions.
More like this
All components →- Pro
Glass Segmented
Components · Refined - Pro
Glass Notifications
Components · Refined Snap Carousel
Components · RefinedCookie Consent
Components · RefinedTimezone Slider
Components · RefinedLightbox Gallery
Components · Refined