Back to Components
Settings
Language Selector
Dropdown for selecting a language with search filter and flag icons.
PropsUsage ExampleVariations
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/language-selector.tsx
Installation
Using shadcn CLI
npx shadcn add language-selector --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Settings Components
Account Settings Form
Form with avatar upload, display name, email, and timezone fields for account management.
Notification Toggle
Grouped notification settings with toggle switches, labels, and descriptions.
Privacy Settings
Card with toggles for various privacy options like profile visibility and data sharing.
Theme Switcher
Toggle group for light, dark, and system theme preferences with inline SVG icons.
Theme Toggle
Dark and light mode toggle with smooth icon transitions.