👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Account 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.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/account-appearance-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/account-appearance-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/account-appearance-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/account-appearance-01.jsonRelated blocks you will also like
Account Basic Information
Personal details and profile info
Account Notification Preferences
Email and push notification settings
Account Privacy Settings
Privacy and data control
Account Security Settings
Password and 2FA management
Account Connected Accounts
Link social media accounts
Account Email Preferences
Email address management
Questions you might have
Account API Keys
API key management for developers with key generation, revocation, permission scopes, usage tracking, and copy-to-clipboard functionality
Account Avatar Upload
Profile avatar upload with image preview, drag-and-drop support, file validation, crop functionality, and remove/replace options