Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Theme Settings Sheet
A theme settings sheet with Light, Dark, and System radio button choices plus Compact Mode and Enable Animations toggles
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Theme preferences are personal—give users full control. This React Sheet offers Light, Dark, and System theme selection with checkbox radio buttons, plus Compact Mode and animations toggles using shadcn/ui Checkbox components. Built with Radix UI Dialog primitives, the appearance controls let users customize visual experience—perfect for app settings, accessibility preferences, display customization, UI configuration, or any interface where users expect to control how the app looks and behaves.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
App Preferences
General app preferences
Notification Preferences
Grouped notification settings
Privacy Settings
Privacy controls
Radio Group
Exclusive selection component
Checkbox
Standard checkbox component
Profile Edit Sheet
Form with save button
Questions you might have
React Notification Preferences Sheet
A notification settings sheet with grouped checkbox controls for Email Notifications and Push Notifications categories
React Privacy Settings Sheet
A privacy settings sheet with checkbox toggles for Public Profile, Show Email, Search Indexing, Activity Status, and destructive Delete Account button