Control Center

ProNew

A macOS-style Control Center panel in frosted glass with toggle tiles, grouped Wi-Fi, Bluetooth and AirDrop rows, pill sliders and a Now Playing tile.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/control-center

Usage

Props

ControlCenter

Prop	Type	Default	Description
`label`	`string`	`"Control Center"`	Accessible name of the panel.

ControlTile

Prop	Type	Default	Description
`icon`	`ReactNode`	-	Icon in the round badge.
`label`	`string`	-	Name of the control.
`status`	`string`	-	Second line, such as the current state.
`pressed`	`boolean`	-	Controlled on state.
`defaultPressed`	`boolean`	`false`	Initial on state when uncontrolled.
`onPressedChange`	`(pressed: boolean) => void`	-	Called with the new on state.
`stacked`	`boolean`	`false`	Stacks the badge over the label as a square tile.

ControlRow

Prop	Type	Default	Description
...	-	-	Same props as `ControlTile` except `stacked`. Use inside `ControlCluster`.

ControlSlider

Prop	Type	Default	Description
`label`	`string`	-	Name shown above the slider and used as its accessible name.
`icon`	`ReactNode`	-	Icon drawn in the track.
`value`	`number`	-	Controlled value from 0 to 100.
`defaultValue`	`number`	`50`	Initial value when uncontrolled.
`onValueChange`	`(value: number) => void`	-	Called with the new value.

ControlNowPlaying

Prop	Type	Default	Description
`title`	`string`	-	Track title.
`artist`	`string`	-	Artist or show.
`artwork`	`MediaSource`	-	Artwork: an image URL, an image object or an element.
`playing`	`boolean`	-	Controlled playing state.
`defaultPlaying`	`boolean`	`false`	Initial state when uncontrolled.
`onPlayingChange`	`(playing: boolean) => void`	-	Called with the new playing state.
`onPrevious`	`() => void`	-	Called for the previous button.
`onNext`	`() => void`	-	Called for the next button.

ControlCluster is a <div> that groups rows in one tile.

Notes

Tiles are real toggle buttons with aria-pressed, and sliders are Radix sliders, so everything works from the keyboard.
Place it over a colorful background so the frosted glass reads.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/control-center

Usage

Props

ControlCenter

Prop	Type	Default	Description
`label`	`string`	`"Control Center"`	Accessible name of the panel.

ControlTile

Prop	Type	Default	Description
`icon`	`ReactNode`	-	Icon in the round badge.
`label`	`string`	-	Name of the control.
`status`	`string`	-	Second line, such as the current state.
`pressed`	`boolean`	-	Controlled on state.
`defaultPressed`	`boolean`	`false`	Initial on state when uncontrolled.
`onPressedChange`	`(pressed: boolean) => void`	-	Called with the new on state.
`stacked`	`boolean`	`false`	Stacks the badge over the label as a square tile.

ControlRow

Prop	Type	Default	Description
...	-	-	Same props as `ControlTile` except `stacked`. Use inside `ControlCluster`.

ControlSlider

Prop	Type	Default	Description
`label`	`string`	-	Name shown above the slider and used as its accessible name.
`icon`	`ReactNode`	-	Icon drawn in the track.
`value`	`number`	-	Controlled value from 0 to 100.
`defaultValue`	`number`	`50`	Initial value when uncontrolled.
`onValueChange`	`(value: number) => void`	-	Called with the new value.

ControlNowPlaying

Prop	Type	Default	Description
`title`	`string`	-	Track title.
`artist`	`string`	-	Artist or show.
`artwork`	`MediaSource`	-	Artwork: an image URL, an image object or an element.
`playing`	`boolean`	-	Controlled playing state.
`defaultPlaying`	`boolean`	`false`	Initial state when uncontrolled.
`onPlayingChange`	`(playing: boolean) => void`	-	Called with the new playing state.
`onPrevious`	`() => void`	-	Called for the previous button.
`onNext`	`() => void`	-	Called for the next button.

ControlCluster is a <div> that groups rows in one tile.

Notes

Tiles are real toggle buttons with aria-pressed, and sliders are Radix sliders, so everything works from the keyboard.
Place it over a colorful background so the frosted glass reads.