Notification Toggle
Grouped notification settings with toggle switches, labels, and descriptions.
Product updates
Stay informed on releases and improvements.
Release notes
Monthly updates and highlights.
Beta previews
Early access to upcoming features.
Workspace activity
Notifications about your team and projects.
Mentions
Alerts when someone mentions you.
Task reminders
Upcoming due dates and assignments.
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/notification-toggle.tsx
Installation
Using shadcn CLI
npx shadcn add notification-toggle --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.
Language Selector
Dropdown for selecting a language with search filter and flag icons.
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.