Control centerPro
Workspace quick settings: tiles that morph into detail, a duration dial, and rubber-banded meters.
Live · keyboard ready
Alert volume
Text size
- A quick settings panel with a handful of toggles and levels for a web workspace.
- Focus session controls with a duration dial and allowed people.
- Notification channel toggles grouped behind one tile.
- Use switch, slider, and radio-group directly in a regular settings form.
- Use time-dial to pick a time across time zones.
- Use dropdown-menu for a short list of commands.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { ControlCenter } from "@/registry/components/control-center/control-center";import { Moon, Briefcase } from "lucide-react"; export function QuickSettings() { return ( <ControlCenter focusModes={[ { id: "deep", label: "Deep work", icon: Briefcase, description: "Silences everything but mentions", defaultMinutes: 50 }, { id: "rest", label: "Rest", icon: Moon, description: "Silences all alerts", defaultMinutes: 30 }, ]} channels={[{ id: "mentions", label: "Mentions", defaultOn: true }, { id: "deploys", label: "Deploys" }]} onStateChange={state => saveSettings(state)} /> );}ControlCenter
Quick settings for a web workspace: focus sessions, notification channels, presenting mode, alert volume, and text size.
PropTypeDefaultDescription
focusModesRequired{ id: string; label: string; icon: LucideIcon; description: string; defaultMinutes: number }[]–Focus modes offered in the focus detail. defaultMinutes seeds the session dial.channelsRequired{ id: string; label: string; description?: string; defaultOn?: boolean }[]–Notification channels toggled in the notifications detail.people{ id: string; name: string; avatar: string }[][]People who can still reach you during a focus session.defaultVolumenumber60Initial alert volume, 0 to 100.defaultTextSizenumber100Initial text size as a percent of the base, 85 to 130.formatTime(date: Date) => string–Formats the end of a session. Defaults to a short en-US clock time.onStateChange(state: { focus: { mode: string; minutes: number; until: string } | null; notifications: boolean; channels: Record<string, boolean>; presenting: boolean; volume: number; textSize: number }) => void–Called with the full settings state after any change, including each step while a meter is dragged. Focus detail edits apply only on Start or Update session.labelstring"Quick settings"Accessible name of the panel.classNamestring–Extra class on the panel.- EnterorSpace
- Toggles a tile or opens its detail from the chevron. On the Focus tile with no session, starts the first mode at its default length.
- Arrow keys
- Adjust the meters by one step (1% volume, 5% text size) and the session dial by 5 minutes.
- PageUporPageDown
- Adjust meters by four steps and the dial by 15 minutes.
- HomeorEnd
- Set a meter to its limit, or the dial to 5 or 120 minutes.
- Escape
- Closes the open detail and returns focus to its chevron.
- Tab
- Cycles focus inside the open detail.
- Tiles are toggle buttons with aria-pressed; chevrons open a modal dialog with a focus trap and aria-haspopup.
- Meters and the session dial are sliders with formatted aria-valuetext; channel toggles use role="switch".
- Focus modes are a radiogroup, and the grid behind an open detail is inert. Clicking the scrim closes the detail.
- A tile grows into its detail with a shared element morph, and meters follow the pointer 1:1 from where they were grabbed, with rubber-banded edges. A tap without a drag jumps the meter to that spot, and the track swells slightly while held.
- The session dial counts minutes as the knob travels, keeps counting across twelve o'clock, resists past 5 and 120 minutes, and snaps to 5 minute steps on release.
- Icons and status text swap with a short blur; the dial knob springs to snapped values.
- Reduced motion is applied through MotionConfig, removing travel and keeping fades.
- The panel is min(100%, 22.5rem) wide with a fixed height, sized for a popover or side column.
- Below 360px viewport width padding tightens and the session dial shrinks from 164px to 150px.
- Meters keep touch-action pan-y so the page still scrolls, while the dial uses none so it can be turned by touch.
- Tiles morph into details through shared layoutIds; only one detail is mounted at a time.
- Meters follow the pointer through motion values, so drags do not re-render the panel per frame.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for a quick settings panel with a handful of toggles and levels. For ordinary forms use switch, slider, and radio-group directly.
- It is uncontrolled: seed it with defaults and persist through onStateChange. Pass lucide icon components (not elements) for focus modes.
The full library index for assistants is at /llms.txt.