shadcn.io is not affiliated with official shadcn/ui
Add Profile Dialog Block for Radix UI
A newsletter's writers page with its byline composer shown open: a name, what they write, a 120 character bio, a mark from six drawn glyphs or initials and a switch, beside a card that shows the byline as it will print.
Installation
Overview
Show a writer how they will read before they are added, with this byline composer for React with Radix UI. It opens from the Writers page of Penlane, a newsletter platform: the page's header holds an outline Add writer Button, and an issue, a masthead, a title, an empty byline slot and lines of text, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Dialog is a split. At the start a byline card shows what will print, "By Maren Tollefsen, food writer", with the mark and the first lines of the bio, and it changes as you type. Under it, the mark is picked from six drawn glyphs or the writer's initials. At the end are the name Input, what they write, a bio Textarea with a count of 120 and a Switch that prints the byline on every issue. Add profile, the only Shine Button, raises the writer count on the page and, with the switch on, puts the byline under the issue's title. There is no upload: the mark is drawn, and nothing is saved. For preview the dialog is drawn open in place when the page loads; the Add writer button opens the real Dialog, with the same form. For newsletters, magazines and any publication with bylines.
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 Add writer 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 WriterFields component and share the block's state, so what you 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.
What is the byline card?
The byline as the issue prints it: "By" and the name, a comma and what they write, with the mark in a round tile and the first lines of the bio under it. Empty fields show "By your name" and a placeholder line, so the card never collapses. On a phone it is a single row above the form with the bio left out, so the form stays on the first screen.
How is the mark chosen, with no upload?
Seven native radios under the byline card: six glyphs drawn as icons and Initials, which shows the first letters of the name as you type. The arrow keys move the choice, the name of the chosen one sits beside the label and the byline card follows. Choosing a picture file is a different feature, and this block has no file input. In your app add one as another option and keep the glyphs for writers who don't want a photo.
How does the bio count work?
The visible number counts the trimmed text against 120 and is hidden from screen readers; what they hear is said 600 ms after you stop typing, at 20 and 10 characters to go, at none and when over. Going over keeps the dialog open on Add profile, says how many characters to cut under the field and puts focus in it. A name that is empty or already on the page is refused the same way.
What stays local in the demo, and how do I wire it up?
All of it. The three writers on the page are typed constants, and Add profile only raises the drawn count, prints the byline when the switch is on and says in a polite message that nothing was saved. In your app post the fields from add, add the writer from the response and let your server be the judge of duplicates.
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 and stays inside until it closes, and Escape, Cancel and the close button return focus to Add writer. The trigger is the 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 the button.