Notification Settings Field

A notification preferences list that pairs a title, description and toggle switch for each setting, separated by dividers, for account or app settings pages.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Notification Settings Field to your project and fits it to your theme.

import NotificationSettingsField from "@/components/ui/field-02";

export default function DemoPreview() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <NotificationSettingsField />
    </div>
  );
}