# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/settings66. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-28

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Settings](/blocks/settings)
5. /
6. Workspace Preferences Panel

# Workspace Preferences Panel[PRO](/pricing)

A settings panel with a section rail on the left and the chosen group on the right, laying out hairline preference rows with switches, a select for the group's default, and a save bar underneath.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/settings66`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop        | Type                                  | Default | Description                                                     |
| ----------- | ------------------------------------- | ------- | --------------------------------------------------------------- |
| badge       | { label: string }                     | –       | Monospace eyebrow above the hairline rule, rendered via Badge23 |
| heading     | string                                | –       | Section heading in the left column                              |
| description | string                                | –       | Supporting paragraph, right-aligned from md up                  |
| sections    | SettingsSection\[\]                   | \[\]    | Groups in the rail, and the rows each one shows                 |
| saveBar     | { note: string; buttonLabel: string } | –       | Note and save action along the bottom of the panel              |
| className   | string                                | –       | Extra classes for the outer <section>                           |

tsCopy

```
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.

Wiring the form up

This block ships the preference markup only; persistence, validation, and saving are yours to add. Our guide wires field markup like this to [React Hook Form, TanStack Form, and Formisch](/blog/shadcn-forms-react-hook-form-tanstack-formisch) on one field system.

## More Settings blocks

[View all Settings](/blocks/settings)

[](/block/settings67)

PRO

settings67

### Email Preferences With Live Volume

A subscription preference list where each list carries how often it sends, and the figure underneath recomputes the monthly email volume as boxes are ticked, down to a stated zero.

[](/block/settings64)

FREE

settings64

### Invoice History Table

Billing history table displaying invoices with date, description, amount, payment status badges, and download buttons. Perfect for account billing pages and payment management dashboards.

[](/block/settings59)

PRO

settings59

### Subscription Plan Card

Subscription management card displaying current plan details, pricing, included features, renewal date, and status badges with actions to change or cancel. Perfect for SaaS billing dashboards and account settings.

[](/block/settings65)

PRO

settings65

### Invoice Detail View

Detailed invoice page with billing address, itemized line items table, subtotal, tax, total, and payment method info with print and download actions. Perfect for generating printable invoices and payment receipts.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.