Settings 01
NewAccount settings with a section list on the left: a profile form with a photo picker, notification switches grouped by channel, and a save bar that appears only when something has changed.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/settings-01.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Files
What the command adds to your project, and where.
app/settings/page.tsxThe page itself, at the route it is meant for. Move or rename it to suit your app.
components/settings-01/icons.tsxA component the page imports. Edit it freely.
components/settings-01/notifications-panel.tsxA component the page imports. Edit it freely.
components/settings-01/profile-panel.tsxA component the page imports. Edit it freely.
components/settings-01/settings-shell.tsxA component the page imports. Edit it freely.
components/settings-01/settings-state.tsA component the page imports. Edit it freely.
components/settings-01/summary-panel.tsxA component the page imports. Edit it freely.
It also installs the components it is built from, unless you already have them: Avatar, Button, Field, Switch, Tabs, Textarea.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Settings
- Settings 02Team settings for a workspace: a members table with role pickers, an invite dialog that takes email addresses as chips, pending invitations, and a danger zone with a typed confirmation.
- Settings 03Billing settings: a plan card, usage meters against the plan's limits, a masked payment method you can replace, an invoice list with downloads, and a change-plan dialog that compares plans and explains proration.