SatoriUI

Settings

An account settings page: a section list beside profile, notification switches, density radio cards and a danger zone.

Settings

Your profile, how we reach you, and how the app looks.

Profile
Shown to people in your workspace.
TR

A sentence or two. Markdown is not supported.

Notifications
Email only. In-app notifications are always on.

When someone @mentions you in a comment.

A Monday summary of what changed.

Receipts, failed payments and renewals.

New features, at most twice a month.

Density
How much fits on a screen. Applies to tables and lists.
Delete account
Removes your profile and every document you own. Workspaces you share stay with their other members. This cannot be undone.

Installation

  1. 1. Install a design system if the project does not have one yet: Cueit, Skita or Folio.

  2. 2. Add the block. It installs to components/satori-ui/blocks/ with the shadcn/ui primitives it uses.

    npx shadcn@latest add @satoriui/settings-01

  3. 3. Render it inside the system's scope. With the scope class on <html> there is nothing more to do. To try another system, change the class.

    app/page.tsx
    import { Settings01 } from "@/components/satori-ui/blocks/settings-01";
    export default function Page() {
      return <Settings01 />;
    }

How it adapts

It is built from shadcn/ui primitives, Avatar, Button, Card, Input, Label, Radio group, Separator, Switch and Textarea, which every design system re-skins.

For what shadcn has no name for, it uses 6 of the shared contract utilities. Every system defines them identically and sets the variables they read.

ds-nav-item
Navigation rows
ds-title
The title
ds-subtitle
The subtitle
ds-small
Secondary copy
ds-tile
Surfaces it draws itself
ds-hover
Quiet hover fills
Next blockCreate form