shadcn.io is not affiliated with official shadcn/ui
Workspace General Settings Block for Radix UI
A full-page workspace settings form with a name, an address whose change lists the three places it touches, an initials logo, a 160 character description, time zone and language, and a save bar pinned to the bottom.
Installation
Overview
Give a workspace its name and address on a page of its own, with this general settings page for React with Radix UI. A centred column between two rails holds four sections under a title. Identity has the workspace name and the address, a slug typed after its domain in an input group that keeps only lowercase letters, digits and hyphens. Under the address a list is always there: idle it names the three places the address appears (invite links, embeds and the API base URL), and once the slug differs from the saved one it shows each of them before and after and offers a tick to redirect the old address for 30 days. Logo shows the workspace's initials in a tile until a dropped or chosen image replaces it, using the File Upload dropzone; the image stays in this tab. Description is a Textarea with a 160 character counter, and Region is a time zone and a language in Native Select menus. A bar pinned to the bottom of the screen counts unsaved changes in a status line beside a Shine Button to save them and an outline Button to discard them; a refused save names the field and moves focus to it. It's built from Field, Input, Input Group, Textarea, Native Select, File Upload, Button, Shine Button and Guides, with a CSS entrance only. The danger zone, transfer and deletion are their own blocks. For a wiki, a project tool or any product with workspaces.
FAQ
How do I fill it with my own workspace?
Edit the constants at the top. SAVED is the workspace stored when the page opens (name, address, description, time zone, language and whether the old address redirects), DOMAIN is the part of the address before the slug, PLACES lists the places that use the address with the path each one adds, and ZONES and LANGUAGES fill the two menus. RESERVED lists addresses nobody can take.
What does the address list do?
It answers the question before you ask it. While the slug is unchanged it shows where the address appears today. As soon as you edit it, each row reads "before becomes after", the tick for redirecting the old address for 30 days switches on, and the sentence under the list says what happens: the three places move and the old address redirects for 30 days, or stops working at once if you untick it. The list is always in the page, so nothing shifts when it becomes active. In your app, build the rows from the places your product really generates.
What is refused when I save?
A name shorter than 2 or longer than 40 characters, and an address that is shorter than 3, longer than 30, has a leading, trailing or doubled hyphen, or is on the reserved list. The first field in reading order is marked invalid, its reserved line explains the rule in plain words and focus moves to it. The description cannot go over 160 characters, since the field stops at the limit.
What happens when I press Save, and what stays local?
Nothing leaves the page and nothing is renamed. The block keeps the saved workspace and the one being edited, and counts how many settings differ, so the status line can say "2 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back. To make it real, send the edited workspace to your server in the save handler and check that the address is free there. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.
Is the logo uploaded anywhere?
No. The chosen image is read in the browser and shown through a temporary address that is revoked when you replace or remove it, so it never leaves this tab. Images up to 2 MB are accepted; anything else is refused with a plain message. To make it real, upload the file to your storage in the save handler and keep the URL it returns.
How does the save bar behave?
It is pinned to the bottom of the screen at every width, so Save is always in reach however long the page grows, and it is always in the page, so nothing appears or moves on the first edit. Until something changes the two buttons are quiet and answer a press with "No changes to save."