Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Account Block Appearance Settings
Appearance and display settings with theme selector, language preferences, and interface customization options
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Dark mode isn't just a toggle anymore. This React appearance settings panel lets users customize theme (light/dark/system), language, timezone, and interface density in one clean interface. Built with shadcn/ui Card, RadioGroup, and Select components with Lucide React icons, the theme selector shows visual previews of each option, language dropdown supports internationalization, and compact mode toggle adjusts UI density. Real-time preview updates—perfect for user dashboards, account settings, or any app where personalization improves user satisfaction and accessibility.
Appearance
Customize how the application looks and feels
Theme
Interface
Reduce spacing to show more content on screen
Minimize animations for accessibility
Language & Region
Used for displaying dates and times
Changes will apply immediately across all your devices
Installation
Related blocks you will also like
React Account Block Basic Information
Personal details and profile info
React Account Block Notification Preferences
Email and push notification settings
React Account Block Privacy Settings
Privacy and data control
React Account Block Security Settings
Password and 2FA management
React Account Block Connected Accounts
Link social media accounts
React Account Block Email Preferences
Email address management
Questions you might have
React Account Block API Keys
API key management for developers with key generation, revocation, permission scopes, usage tracking, and copy-to-clipboard functionality
React Account Block Avatar Upload
Profile avatar upload with image preview, drag-and-drop support, file validation, crop functionality, and remove/replace options