shadcn.io is not affiliated with official shadcn/ui
Organization Profile Settings Block for React
An organization profile panel with company name, website check, industry, team size, an initials logo that a chosen image replaces and a business address that reshapes and validates by country.
Installation
Overview
Collect a company's details in the shape its country expects, with this organization profile panel for React with Base UI. Inside a hairline frame with a plus mark on each corner, the first band holds the company: a name, a website that is checked as an address, an industry in a Native Select and a team size chosen from four ranges in a Segment Group. Beside it the logo shows as an initials mark that a dropped or chosen image replaces, using the File Upload dropzone; the image stays in this tab and can be removed. The second band is the business address, and it reshapes by country: choose the United States, the United Kingdom or Germany and the labels, the order of the fields (the German address puts the PLZ before the Ort), the examples and the format check all change, so a ZIP code, a postcode and a PLZ are each held to their own shape. A refused save says how many fields need fixing, marks them and moves focus to the first. The last band counts unsaved changes in a status line beside a Shine Button to save them and an outline Button to discard them. On a phone the logo sits under the company fields, the address fields run one per row and the save bar stays pinned to the bottom of the screen. It's built from Field, Input, Native Select, Segment Group, File Upload, Button, Shine Button and Guides, with a CSS entrance only. For an HR, payroll, invoicing or onboarding product, or any form whose fields depend on a choice made above them.
FAQ
How do I add a country or change the address formats?
Edit the PLACES list at the top. Each country is an object with its name and its lines in the order they are shown; each line has the field it fills (street, city, region or postal), its label, an example, the message a refused value gets, whether it is required and a pattern the value must match, or none. Add a country there and the menu, the field order and the check follow. SAVED is what the account has stored when the page opens.
What does the format check do?
It runs when you press Save, on the fields that belong to the chosen country. A ZIP code is five digits with an optional four-digit extension, a state is two letters, a UK postcode has an outward and an inward half, and a German PLZ is five digits. A required field left empty is refused too. The first problem in reading order is focused, every problem is marked and given a line in its own reserved space, so nothing moves. These patterns catch typos, not addresses that do not exist; use an address service if you need that.
What happens to what I typed when I change the country?
The street and city stay, since they are free text, and the state or county is cleared because its meaning differs. A line in the status area says the address now follows the new format. Postal codes are kept as typed and checked against the new rule when you save.
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 and is gone when the page is. 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.
What happens when I press Save, and what stays local?
Nothing leaves the page. The block keeps the saved profile and the one being edited, and counts how many settings differ, so the status line can say "3 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 profile to your server in the save handler. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.