Skip to content
Aback UI

Block ยท Settings

Settings section

A workspace settings section with identity fields, preferences, a save bar, and a confirmed danger zone.

Beta7 componentsRegistry JSON (opens in a new tab)
the Settings section preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add settings-section

The block lands at components/blocks/settings-section.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Pass initialValues from the server and implement onSave. Until then the block is local state and says so.
  • Extend the preference rows as you add settings. Each Switch needs a Label and a sentence that explains the effect, not just the name.
  • The danger zone is deliberate. Keep the AlertDialog and the explicit Delete workspace action; do not replace it with an immediate delete.
  • Wire onDelete to a server action and return a result the page can announce. The block does not navigate or toast on success.

Accessibility

  • Heading order starts at h2 for the section and h3 inside each card, so it slots under an existing page heading.
  • Switch exposes role switch and aria-checked; the adjacent text describes the effect, so state is never carried by colour alone.
  • The save result is a role status message inside the section. It is not a toast that disappears before it can be read.
  • Deletion requires an alertdialog with a named action and a cancel path, and focus returns to the trigger on dismissal.