shadcn.io is not affiliated with official shadcn/ui
Tenant Select Login Block for Ark UI
The workspace chooser shown after sign-in: a signed-in line, a filter, a native table of four workspaces sortable by name or last used, a star that sets the default and one button that opens the chosen one.
Installation
Overview
Let a signed-in person choose where to go, with this tenant select login block for React with Ark UI. It's the workspace chooser of Clientloft, an agency CRM, shown as a compact header over one framed panel. The first band says who is signed in and offers Sign out; the toolbar filters the four workspaces by what their name, address or role holds and counts "Showing 2 of 4"; the table is native, one radio row per workspace with its name and address, your role in an outline Badge, the member count, the day you last opened it and a star that makes it your default. The Workspace and Last used heads sort the rows and say how in a polite line. Nothing changes the table's height: a filter that matches nothing shows an Empty state in the same frame, and Create workspace is a ghost row at its foot. Pressing Enter on a row, or the one Shine Button, opens the chosen workspace. It's built from Empty, Badge, Input, Button, Shine Button and Guides, with a native table and a CSS entrance only. For multi-tenant apps that ask which workspace after the password.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The four workspaces, your roles, member counts and last-used days are typed, the default star only changes the page's state and opening a workspace waits 700 milliseconds and says "Opened" without going anywhere. In a product, list the account's memberships from your server, store the default on the account and start a session in the chosen workspace on open.
How does the sorting work?
The Workspace and Last used heads are buttons. A first press sorts in the order that column starts with (names A to Z, last used newest first), a second press reverses it and a third puts the rows back in their listed order; the active head carries aria-sort and a polite line reads the result. Ties fall to the workspace name, so a tie never reshuffles.
How does the filter work, and what is read out?
It matches the text of the name, address and role, ignoring case and accents, so mill finds Cobalt Mill and guest finds the workspace where you are a Guest. The count beside the field updates at once; a polite line reads it about half a second after the last keystroke ("2 of 4 match."), never once per letter. A filter with no match shows a short message and a button to clear it, and the frame keeps its height.
What does the star do?
It makes that workspace the one that opens first next time. Exactly one workspace is the default, so pressing the star of the current default just says it already is. The star is a toggle button named "Default workspace, Cobalt Mill" and pressed for the default; it is a filled star against an outline one, not a color.