HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Menubar
  • Meter
  • Multi Select
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Settings

PreviousNext

An account settings page with profile, account, security, notifications, appearance and team sections, a sticky save bar and a danger zone, built from Another UI primitives.

Settings

Manage your account and preferences.

Profile

This is how other people see you on the workspace.

PNG or JPG, up to 10 MB. You can crop it after you pick it.

anotherui.dev/

Letters, numbers and dashes.

90 characters left.

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/settings.json

Features#

  • Section nav. Profile, Account, Security, Notifications, Appearance and Team sit in a side nav built on Tabs. On phones the nav turns into a Select, so it never scrolls sideways. A dot marks each section with unsaved changes.
  • Profile. Avatar Upload with cropping, name, email, a username with the address in front, and a bio with a character count.
  • Account. Language, time zone and date format, with Canadian time zones from Vancouver to St. John's.
  • Security. Change your password with Password Strength set to a 10 character minimum. Two-factor sign in opens a Responsive Dialog with the setup key and a 6 digit code. Active sessions list each device with a Sign out button, plus one to sign out of all the others.
  • Notifications. Switch rows grouped by Email, Push and Security. Sign-in alerts stay on.
  • Appearance. Theme, density and the first day of the week on a Segmented Control, plus switches for reduced motion and sounds.
  • Team. Invite by email, change roles and remove people.
  • Save bar. Profile, account, notification and appearance edits go into a draft. While there are changes, a bar rises from the bottom with the count, Discard and Save changes, using the same transitions.dev toast motion as the Action Bar. Password, two-factor, sessions and team changes apply straight away.
  • Danger zone. Delete account asks you to type your email in a Responsive Dialog before the destructive button turns on.
  • Sound. Cuelume plays on navigation, toggles, saves, discards and dialogs.

Usage#

import { Settings, SAMPLE_SETTINGS } from "@/components/blocks/settings"
<Settings
  values={SAMPLE_SETTINGS}
  onSave={async (values) => {
    await fetch("/api/settings", { method: "PUT", body: JSON.stringify(values) })
  }}
/>

onSave gets the whole draft. If it throws, the bar stays open and an error toast shows. Pass sessions, members and defaultSection to fill the other sections, and onDeleteAccount to run your own delete.

NoticesBilling

On This Page

InstallationFeaturesUsage