SettingsFree

Account settings.

Profile fields, notification preferences and clear save feedback.

PERSONAL SPACE

Your profile.

The details that make it yours.

Live interface · sample data · state resets on reload

GET STARTED

The source is yours.

npx shadcn@latest add https://ui.bld8.dev/r/account-settings.json

Install into an existing application, or download the complete starter below.

Download the starter, unzip it and run the commands below. It includes a Next.js app, both BLD8 packages and their editable source. No BLD8 npm installation is needed.

npm install
npm run dev

Open http://localhost:3000. Node 22 and React 19 are used. Import AccountSettings from @bld8/blocks in your own composition.

Download account settings

NOTES TO SELF

A clear starting point.

Pass initialValues and an async onSave callback to persist changes. Without a callback, changes last for this session only.

Both collections use the MIT licence. Personal and commercial use are allowed; keep the licence notice when sharing the code.

About the collections Source manifest