Workspace Switcher

Auth36: Workspace Switcher

A full-height, centered card that lists workspaces as clickable rows (each with an uppercase logo-initials tile, name, and detail line, plus a hover chevron that nudges right), followed by an optional dashed "create a new workspace" row and a "signed in as" footer with a sign-out link.

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/auth36?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/auth36.tsx.

Quick start

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

import { Auth36, auth36Demo } from "@/components/beste/block/auth36";

export default function Page() {
  return <Auth36 {...auth36Demo} />;
}

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

import { Auth36 } from "@/components/beste/block/auth36";

export default function Page() {
  return (
    <Auth36
      heading="Choose a workspace"
      description="Select a workspace to continue."
      workspaces={[
        { name: "Acme Inc.", detail: "12 members", logoText: "AC", href: "/w/acme" },
        { name: "Northwind", detail: "Owner · 4 members", logoText: "NW", href: "/w/northwind" },
      ]}
      createWorkspace={{ label: "Create a new workspace", href: "/w/new" }}
      account={{
        signedInLabel: "Signed in as",
        email: "jane@example.com",
        signOutLabel: "Sign out",
        signOutHref: "/logout",
      }}
    />
  );
}

Props

type Workspace = {
  name: string;
  detail: string;
  logoText: string;
  href?: string;
};

Behavior notes

• Every row is a next/link, so navigation is purely href-driven; there are no onClick handlers or selection state anywhere in the block.
• A workspace with no href falls back to "#", meaning that row links to the current page rather than being disabled.
• Rows are keyed by array index, not by a stable id, so reordering workspaces can confuse React's reconciliation.
• logoText is rendered verbatim inside a fixed size-10 tile with uppercase styling; nothing truncates or caps it, so pass short initials (long strings overflow the tile).
• The createWorkspace row and the entire account footer are conditionally rendered: pass neither and the card shows only the workspace list with no footer.
• The chevron on each workspace row is decorative, animating translate-x-0.5 on hover via the group/auth36 scope; the create row uses a dashed Plus tile instead and has no chevron.
• The section forces min-h-screen and vertically centers its max-w-md content, so it is designed to own the full viewport as a post-sign-in interstitial rather than sit inline in a page.