Settings Profile 9 - Floating save bar on unsaved changesPro
A profile form that tracks dirty state and slides in a floating “unsaved changes” bar with discard and save actions, counting how many fields changed. Use it for settings pages that save explicitly rather than on blur.
About Settings Profile 9
A profile form that tracks dirty state and slides in a floating “unsaved changes” bar with discard and save actions, counting how many fields changed. Use it for settings pages that save explicitly rather than on blur.
Settings Profile 9 is a settings profile block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 121 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- settings
- dirty-state
- save-bar
- unsaved
- form
- motion
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add settings-profile-09Dependencies installed automatically: motion.
Uses: button, input, label, reveal, switch, textarea, use-reduced-motion, utils.
Usage
import SettingsProfile09 from "@/components/blocks/settings-profile-09"
export default function Page() {
return <SettingsProfile09 />
}