Account Settings
An account settings screen with a sidebar, breadcrumb, grouped settings panel, team member management and usage meters.
#settings#admin#team
Install
$ npx shadcn@latest add https://chromotion.dev/r/account-settings.jsonThe page lands in app/account-settings/page.tsx and the components it uses are installed into components.
Components used
Installing the template installs these too.
- App SidebarApplication UIApp sidebar with grouped navigation, badges and a user card; collapses to an icon rail.
- BreadcrumbNavigationBreadcrumb trail that collapses the middle into an expandable ellipsis.
- Settings PanelApplication UIGrouped settings with switches, selects and segmented options, plus a save/reset bar for unsaved changes.
- Team MembersApplication UITeam member list with email invites, role selects and removal; the owner is protected.
- Usage MeterApplication UIStacked usage meter with a legend and warnings when nearing or exceeding the limit.