shadcn.io is not affiliated with official shadcn/ui
Create Workspace Dialog Block for Svelte
An analytics overview with its create-workspace dialog shown open: a name that becomes a live address, an availability check that offers the next free one, a Private switch with a badge on the preview, and a switcher that gains the entry.
Installation
Overview
Name a new place for work and see where it will live, with this dialog for Svelte with Ark UI. It opens from the Overview of Bayleaf Data, a notebook analytics app: the header holds an outline New workspace Button, and the page, a rail whose switcher lists the workspaces beside three figures over a chart, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Dialog has a name Input in a Field and, under it, a card with the address it makes, "bayleaf.test/orchard-labs", written in lower case and hyphens as you type, with a Badge that says Private or Visible to your company. Three addresses are taken in the demo; when you hit one the field says so and offers the next free address as a button. In a muted band a Switch makes the workspace private, which is the default. Create workspace, the only Shine Button, adds the entry at the top of the drawn switcher, with a lock when it is private. For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The New workspace button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same WorkspaceFields component and share the block's state, so a name typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How is the address made from the name?
By slugOf: accents are removed, letters are lower-cased, every run of other characters becomes one hyphen, the ends are trimmed and the result stops at 30 characters. "Orchard Labs" becomes orchard-labs. A name with no letters or numbers is refused with its own message. The address is shown in a monospaced line that always reads left to right, even on a right-to-left page.
How does the availability check work?
The address is looked up in TAKEN as you type, so the answer is live and there is no spinner. A taken address shows its message and a button, "Use orchard-labs-2", that fills in the next free one and puts focus back in the field. Create workspace refuses a taken address the same way. In your app ask your server whether the address is free, debounce it, and still handle a "taken" answer when you create, because someone else may have it by then.
What does the Private switch change?
The badge on the address card and the lock beside the new entry in the switcher. It starts on, because a workspace nobody can find is the safer default. The switch is a plain setting here: your server has to enforce who can find and open the workspace.
What stays local in the demo, and how do I wire it up?
Everything. The created workspace is a row in this page's state, nothing is reserved, and the polite status message says nothing was created. In your app post the name, the address and the privacy from create, add the entry from the response, and switch to the new workspace once it exists.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts in the name field and stays inside until it closes, and Escape, Cancel and the close button all return focus to New workspace. The trigger is the New workspace button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on New workspace.