Settings page
A settings page with five sections: profile with inline validation and an avatar upload, a notification matrix with quiet hours, appearance that re-themes the block as you pick, security with a password form, two-factor setup and session sign-out, and billing. Edits are kept per section and one bar saves them all, or press ⌘S. Try the username “admin” or the current password “wrong”.
Dependencies
Copy below cli
npx shadcn@latest add https://ui.isaiahbjork.com/app-settings.jsonHow to use
import { AppSettings } from "@/components/bjork-ui/blocks/app-settings";export function SettingsPage() { return ( <div className="h-dvh"> <AppSettings profile={{ name: "Rhea Castillo", username: "rhea", email: "rhea@halcyon.app", bio: "", timezone: "America/Los_Angeles", }} onSave={async ({ profile, notifications }) => { // only the sections that changed are passed; throw to show an error toast await fetch("/api/settings", { method: "PATCH", body: JSON.stringify({ profile, notifications }) }); }} onChangePassword={async (current, next) => { const res = await fetch("/api/password", { method: "POST", body: JSON.stringify({ current, next }) }); if (!res.ok) throw new Error("That isn't your current password."); }} onRevokeSession={(id) => fetch(`/api/sessions/${id}`, { method: "DELETE" })} onThemeChange={(theme) => localStorage.setItem("theme", theme)} onDeleteAccount={() => fetch("/api/account", { method: "DELETE" })} /> </div> );}
Settings
/Profile⌘Sto saveProfile
How you appear to your team.
Public profile
Shown on your comments, docs and in the member directory.
PNG or JPG, square works best.
Your profile link. Changing it redirects the old one for 30 days.
64 characters left. Links aren't clickable here.
Used for due dates, digests and quiet hours.
Delete account
Removes your profile, your private docs and your access to every workspace. Shared docs stay with their workspace.
You have unsaved changes
Delete your account?
Set up two-factor authentication
Can't scan? Enter JBSW Y3DP EHPK 3PXP