Settings Block

Usage

This block is a practical settings workspace with sidebar navigation, grouped fields, and stateful controls built from the current 5h3ll-ui primitives.
Settings block preview
Use the slider to test when the left rail drops above the main form.
Width1120px
Profile settings

Manage how your workspace appears to the rest of your team.
Workspace nameSlug
Description
Public profile
Allow the workspace profile to be discoverable by other teams.
Weekly reports
Send a summary email every Monday morning.
Danger zone
Transfer ownership

Move this workspace to another verified owner.
Delete workspace

Permanently remove all members, reports, and configuration.
Billing

Review your plan, payment method, and current usage.
Current plan
Growth Annual
$249/month billed annually
Payment method
Visa ending in 4242
Expires 08/28
Usage	Included	Current
Team members	25	18
Projects	Unlimited	42
API requests	500k	312k
<section class="rounded-xl border bg-card text-card-foreground shadow-xs" data-resizable-preview>
  <header class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <div class="min-w-0">
      <p class="text-sm font-medium">Settings block preview</p>
      <p class="text-xs text-muted-foreground">Use the slider to test when the left rail drops above the main form.</p>
    </div>
    <div class="ms-auto flex flex-wrap items-center gap-2">
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="375">Mobile</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="768">Tablet</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="1120">Desktop</button>
      <button type="button" class="btn" data-variant="ghost" data-size="sm" data-preview-preset="1280">Full</button>
    </div>
  </header>
  <div class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <label class="text-xs font-medium text-muted-foreground" for="settings-block-range">Width</label>
    <input id="settings-block-range" class="w-full min-w-40 flex-1 accent-primary" type="range" min="360" max="1280" value="1120" data-preview-range />
    <output class="rounded-md bg-muted px-2.5 py-1 font-mono text-xs tabular-nums" data-preview-output>1120px</output>
  </div>
  <div class="overflow-x-auto bg-muted/30 p-4 md:p-6">
    <div class="mx-auto w-full max-w-full overflow-hidden rounded-xl border bg-background shadow-sm transition-[width] duration-150" data-preview-viewport>
      <div class="w-full p-4 md:p-6">
<section class="tabs flex-col gap-4 xl:flex-row" id="settings-block-tabs">
  <nav role="tablist" aria-orientation="vertical" class="w-full xl:max-w-64">
    <button type="button" role="tab" id="settings-tab-profile" aria-controls="settings-panel-profile" aria-selected="true" tabindex="0">Profile</button>
    <button type="button" role="tab" id="settings-tab-notifications" aria-controls="settings-panel-notifications" aria-selected="false" tabindex="-1">Notifications</button>
    <button type="button" role="tab" id="settings-tab-billing" aria-controls="settings-panel-billing" aria-selected="false" tabindex="-1">Billing</button>
    <button type="button" role="tab" id="settings-tab-members" aria-controls="settings-panel-members" aria-selected="false" tabindex="-1">Members</button>
    <button type="button" role="tab" id="settings-tab-api" aria-controls="settings-panel-api" aria-selected="false" tabindex="-1">API keys</button>
  </nav>

  <div role="tabpanel" id="settings-panel-profile" aria-labelledby="settings-tab-profile" tabindex="-1">
    <article class="card">
      <header class="gap-4 md:flex md:items-start md:justify-between">
        <div class="min-w-0">
          <h2>Profile settings</h2>
          <p>Manage how your workspace appears to the rest of your team.</p>
        </div>
        <div class="card-action flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap">
          <button type="button" class="btn w-full sm:w-auto" data-variant="outline">Cancel</button>
          <button type="button" class="btn w-full sm:w-auto">Save changes</button>
        </div>
      </header>
      <section class="grid gap-6">
        <div class="grid gap-4 lg:grid-cols-2">
          <label class="field">
            <span>Workspace name</span>
            <input class="input" type="text" value="5h3ll Studio" />
          </label>
          <label class="field">
            <span>Slug</span>
            <input class="input" type="text" value="studio" />
          </label>
        </div>
        <label class="field">
          <span>Description</span>
          <textarea class="textarea min-h-28">A design-forward product workspace for internal tools, docs, and reusable interface systems.</textarea>
        </label>
        <div class="grid gap-4 lg:grid-cols-2">
          <div role="group" class="field" data-orientation="horizontal">
            <section>
              <label for="settings-public-profile">Public profile</label>
              <p id="settings-public-profile-description">Allow the workspace profile to be discoverable by other teams.</p>
            </section>
            <input id="settings-public-profile" type="checkbox" role="switch" class="input" aria-describedby="settings-public-profile-description" checked />
          </div>
          <div role="group" class="field" data-orientation="horizontal">
            <section>
              <label for="settings-weekly-report">Weekly reports</label>
              <p id="settings-weekly-report-description">Send a summary email every Monday morning.</p>
            </section>
            <input id="settings-weekly-report" type="checkbox" role="switch" class="input" aria-describedby="settings-weekly-report-description" />
          </div>
        </div>
        <fieldset class="fieldset">
          <legend>Danger zone</legend>
          <div class="grid gap-3 rounded-xl border p-4">
            <div class="item gap-3">
              <section>
                <h3>Transfer ownership</h3>
                <p>Move this workspace to another verified owner.</p>
              </section>
              <button type="button" class="btn" data-variant="outline">Transfer</button>
            </div>
            <hr class="separator" />
            <div class="item gap-3">
              <section>
                <h3>Delete workspace</h3>
                <p>Permanently remove all members, reports, and configuration.</p>
              </section>
              <button type="button" class="btn" data-variant="destructive">Delete</button>
            </div>
          </div>
        </fieldset>
      </section>
    </article>
  </div>

  <div role="tabpanel" id="settings-panel-notifications" aria-labelledby="settings-tab-notifications" tabindex="-1" hidden>
    <article class="card">
      <header>
        <h2>Notification preferences</h2>
        <p>Choose which updates reach your team and how often they are delivered.</p>
      </header>
      <section class="grid gap-4">
        <div role="group" class="field" data-orientation="horizontal">
          <section>
            <label for="settings-email-digest">Weekly email digest</label>
            <p id="settings-email-digest-description">Send a Monday summary covering growth, billing, and release activity.</p>
          </section>
          <input id="settings-email-digest" type="checkbox" role="switch" class="input" aria-describedby="settings-email-digest-description" checked />
        </div>
        <div role="group" class="field" data-orientation="horizontal">
          <section>
            <label for="settings-security-alerts">Security alerts</label>
            <p id="settings-security-alerts-description">Notify owners immediately when login or API key events are detected.</p>
          </section>
          <input id="settings-security-alerts" type="checkbox" role="switch" class="input" aria-describedby="settings-security-alerts-description" checked />
        </div>
        <div role="group" class="field" data-orientation="horizontal">
          <section>
            <label for="settings-product-updates">Product updates</label>
            <p id="settings-product-updates-description">Receive feature announcements and release notes.</p>
          </section>
          <input id="settings-product-updates" type="checkbox" role="switch" class="input" aria-describedby="settings-product-updates-description" />
        </div>
        <fieldset class="fieldset">
          <legend>Delivery channels</legend>
          <div role="radiogroup" aria-label="Notification channels" class="grid gap-3">
            <label class="item rounded-xl border px-4 py-3">
              <input type="radio" name="notification-channel" class="input" checked />
              <section><h3>Email only</h3><p>Simple weekly and transactional email delivery.</p></section>
            </label>
            <label class="item rounded-xl border px-4 py-3">
              <input type="radio" name="notification-channel" class="input" />
              <section><h3>Email and Slack</h3><p>Mirror key activity to the connected workspace channel.</p></section>
            </label>
          </div>
        </fieldset>
      </section>
      <footer>
        <button type="button" class="btn">Save notifications</button>
      </footer>
    </article>
  </div>

  <div role="tabpanel" id="settings-panel-billing" aria-labelledby="settings-tab-billing" tabindex="-1" hidden>
    <article class="card">
      <header class="gap-4 md:flex md:items-start md:justify-between">
        <div class="min-w-0">
          <h2>Billing</h2>
          <p>Review your plan, payment method, and current usage.</p>
        </div>
        <div class="card-action flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap">
          <button type="button" class="btn w-full sm:w-auto" data-variant="outline">Download invoices</button>
          <button type="button" class="btn w-full sm:w-auto">Upgrade plan</button>
        </div>
      </header>
      <section class="grid gap-4 lg:grid-cols-[0.85fr_1.15fr]">
        <div class="grid gap-4">
          <div class="rounded-xl border bg-muted/40 p-4">
            <p class="text-sm text-muted-foreground">Current plan</p>
            <p class="mt-2 text-2xl font-semibold">Growth Annual</p>
            <p class="mt-1 text-sm text-muted-foreground">$249/month billed annually</p>
          </div>
          <div class="rounded-xl border bg-muted/40 p-4">
            <p class="text-sm text-muted-foreground">Payment method</p>
            <p class="mt-2 font-medium">Visa ending in 4242</p>
            <p class="mt-1 text-sm text-muted-foreground">Expires 08/28</p>
          </div>
        </div>
        <div class="table-container rounded-xl border">
          <table class="table">
            <thead>
              <tr><th>Usage</th><th>Included</th><th>Current</th></tr>
            </thead>
            <tbody>
              <tr><td>Team members</td><td>25</td><td>18</td></tr>
              <tr><td>Projects</td><td>Unlimited</td><td>42</td></tr>
              <tr><td>API requests</td><td>500k</td><td>312k</td></tr>
            </tbody>
          </table>
        </div>
      </section>
    </article>
  </div>

  <div role="tabpanel" id="settings-panel-members" aria-labelledby="settings-tab-members" tabindex="-1" hidden>
    <article class="card">
      <header class="gap-4 md:flex md:items-start md:justify-between">
        <div class="min-w-0">
          <h2>Members</h2>
          <p>Invite teammates and manage workspace roles.</p>
        </div>
        <div class="card-action flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap">
          <button type="button" class="btn w-full sm:w-auto" data-variant="outline">Export members</button>
          <button type="button" class="btn w-full sm:w-auto">Invite member</button>
        </div>
      </header>
      <section class="grid gap-3">
        <div class="item rounded-xl border px-4 py-3">
          <section>
            <h3>Pedro Duarte</h3>
            <p>Owner • pedro@example.com</p>
          </section>
          <span class="badge">Active</span>
        </div>
        <div class="item rounded-xl border px-4 py-3">
          <section>
            <h3>Monica Reyes</h3>
            <p>Admin • monica@example.com</p>
          </section>
          <span class="badge" data-variant="secondary">Invited</span>
        </div>
        <div class="item rounded-xl border px-4 py-3">
          <section>
            <h3>Haruto Sato</h3>
            <p>Member • haruto@example.com</p>
          </section>
          <button type="button" class="btn" data-variant="ghost" data-size="sm">Edit role</button>
        </div>
      </section>
    </article>
  </div>

  <div role="tabpanel" id="settings-panel-api" aria-labelledby="settings-tab-api" tabindex="-1" hidden>
    <article class="card">
      <header class="gap-4 md:flex md:items-start md:justify-between">
        <div class="min-w-0">
          <h2>API keys</h2>
          <p>Create, rotate, and revoke keys for backend integrations.</p>
        </div>
        <div class="card-action flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap">
          <button type="button" class="btn w-full sm:w-auto" data-variant="outline">View docs</button>
          <button type="button" class="btn w-full sm:w-auto">Create key</button>
        </div>
      </header>
      <section class="grid gap-3">
        <div class="item rounded-xl border px-4 py-3">
          <section>
            <h3>Production sync</h3>
            <p class="font-mono text-xs">sk_live_••••••••••••u9a4</p>
          </section>
          <span class="badge">Active</span>
        </div>
        <div class="item rounded-xl border px-4 py-3">
          <section>
            <h3>Preview environment</h3>
            <p class="font-mono text-xs">sk_test_••••••••••••x2m8</p>
          </section>
          <div class="flex flex-wrap gap-2">
            <button type="button" class="btn" data-variant="ghost" data-size="sm">Rotate</button>
            <button type="button" class="btn" data-variant="outline" data-size="sm">Revoke</button>
          </div>
        </div>
        <div class="rounded-xl border bg-muted/40 p-4">
          <p class="text-sm font-medium">Best practice</p>
          <p class="mt-2 text-sm text-muted-foreground">Keep separate keys for preview and production, and rotate keys after team-role changes.</p>
        </div>
      </section>
    </article>
  </div>
</section>
      </div>
    </div>
  </div>
</section>
Notes

This is the recommended starting point for workspace settings, account preferences, or admin configuration pages. The left rail collapses naturally under narrower widths inside the resizable preview.