SettingsPanel

Dense settings surface with accessible switches, saved-value callbacks, responsive rows, and reduced-motion thumbs.

InterfaceSource ready6 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/settings-panel.json
Interactive preview
Interface

Notification settings

Choose which updates should interrupt your day.

Product updates

Receive a short release summary.

Weekly digest

One email with workspace activity.

Install with the CLI

# adds SettingsPanel to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/settings-panel.json

Or install the package

// npm install @uigrids/react-ui
import { SettingsPanel } from '@uigrids/react-ui'

export default function App() {
  return <SettingsPanel />
}

Props

PropTypeDefaultDescription
titlestring'Notification settings'Configures the title option.
descriptionstring'Choose which updates should interrupt ...Configures the description option.
settingsunknownDEFAULT_SETTINGSConfigures the settings option.
onChangeunknown-Configures the on change option.
onSaveunknown-Configures the on save option.
classNamestring''Additional CSS classes for the outer element.