Workspace Preferences PanelPRO

Settings66: Workspace Preferences Panel

Settings panel with a section rail on the left and the chosen group on the right, laying out preference rows separated by hairlines, each with its own switch, a select for the group's default, and a save bar underneath.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/settings66?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/settings66?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/settings66.tsx, the select and switch shadcn/ui primitives it is built on, and the badge23 and button21 components it uses for the eyebrow and the save action.

Quick start

The installed file exports settings66Demo alongside the block: the exact props behind the preview above. Spread it to get a working panel in one line.

import { Settings66, settings66Demo } from "@/components/beste/block/settings66";

export default function SettingsPage() {
  return <Settings66 {...settings66Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Settings66 } from "@/components/beste/block/settings66";

export default function SettingsPage() {
  return (
    <Settings66
      badge={{ label: "Workspace" }}
      heading="Settings your front desk can change without a ticket"
      sections={[
        {
          name: "Notifications",
          title: "Notifications",
          description: "Decide what leaves the building, and on which channel.",
          toggles: [
            {
              title: "Appointment reminders",
              description: "Send a reminder 24 hours before the appointment.",
              enabled: true,
            },
            {
              title: "Daily digest for clinicians",
              description: "One message at 07:30 with the day's list.",
            },
          ],
          choice: { label: "Reminder channel", options: ["Email only", "SMS only"] },
        },
      ]}
      saveBar={{
        note: "Changes apply to the whole workspace and are written to the audit trail.",
        buttonLabel: "Save preferences",
      }}
    />
  );
}

Props

type Toggle = {
  title: string;
  description: string;
  enabled?: boolean;
};

type Choice = { label: string; options: string[] };

type SettingsSection = {
  name: string;
  title: string;
  description: string;
  toggles?: Toggle[];
  choice?: Choice;
};

Behavior notes

• Switch state is stored in one record keyed by section and row index, and a key that has not been touched falls back to the row's own enabled. Flipping a switch, moving to another group, and coming back keeps the change.
• name is the rail label and title is the heading inside the panel, so the rail can stay short while the group's heading says the whole thing.
• The select is remounted per section through a key on the active index. Without it, React would keep the first group's chosen value mounted while the options underneath changed.
• Its defaultValue is the first entry of options, so the control opens on a real choice, and the value is uncontrolled from there.
• Nothing is persisted: there is no onChange and the save button has no handler, so the panel is a faithful shell and the write is the integrator's.
• Rows carry a bottom rule that is dropped on the last one, and the select row draws none of its own, so the group never doubles a line against the save bar below it.
• The rail is a wrapping row of pills on mobile and becomes a vertical list at lg, with the active group marked by a muted fill rather than a border.