39 Pro components and page blocks

Get Pro
uibrik

Settings Page

Pro

Preview

Customize

Profile

Usage

import { SettingsPage } from "@/components/uibrik/settings-page/settings-page";

<SettingsPage />

Installation

Pro

Settings Page is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/settings-page

Props

SettingsPage
defaultSection
Type "profile" | "security" | "notifications" | "appearance" | "api-keys" | "billing" | "danger"
"profile"
Section shown first when uncontrolled.
workspaceName
Type string
"acme"
Typed to confirm deleting the workspace.
section
Type SettingsSection
–
Controlled section. Pair with onSectionChange.
onSectionChange
Type (section: SettingsSection) => void
–
Called when the nav switches sections.
defaultValues
Type Partial<SettingsValues>
–
Saved profile, notification and theme values. Discard returns to these.
apiKeys
Type ApiKey[]
–
Existing keys: { id, name, last4, scope?, createdMinutesAgo, lastUsedMinutesAgo? }.
sessions
Type Session[]
–
Signed-in devices: { id, device, location, mobile?, activeMinutesAgo, current? }.
onSave
Type (values: SettingsValues) => void | Promise<void>
–
Persists the draft. The bar shows saving until the promise settles.
onCreateKey
Type (name: string, scope: "full" | "read") => string | Promise<string>
–
Creates a key and returns its full secret, shown once.
onRevokeKey
Type (id: string) => void
–
Called after a revoke is confirmed.
onSignOutSession
Type (id: string) => void
–
Called when a session is signed out.
onChangePassword
Type (current: string, next: string) => void | Promise<void>
–
Called with a valid password change.
onDeleteWorkspace
Type () => void
–
Called once the workspace name is typed and delete is confirmed.
className
Type string
–
Classes for the root.