shadcn.io is not affiliated with official shadcn/ui
Auth Buttons Navbar Block for Svelte
A navbar with a working sign-in flow: Sign in and Sign up open a small dialog, continuing swaps the buttons for an avatar menu and Sign out swaps them back, with the same two states in the phone sheet.
Installation
Overview
A navbar with a real two-state sign-in flow for Svelte with Ark UI, for a photo-sharing app called Vesperlight. Signed out, the bar ends in a ghost Sign in and a Shine Sign up. Either opens a small dialog with one email field and a Continue button; this is a demo, so the dialog says that nothing is sent and any email is accepted. Continuing closes the dialog, swaps the two buttons for the visitor's avatar and name (taken from the part of the email before the @), says so in a polite status and puts focus on the avatar, whose menu holds Profile, Settings, Billing and Sign out. Sign out swaps the buttons back and puts focus on Sign in. On a phone the bar keeps the wordmark, Sign up (or the avatar) and a menu button, and the sheet it opens from the top shows the same two states under the links. The menu, the dialog and the sheet open over the page, so the block stays one bar high (64 pixels, 56 on a phone), and its bottom edge is the next block's top rule. It's built from Dialog, Dropdown Menu, Sheet, Field, Input, Avatar, Guides, Shine Button and Button, with your theme's tokens for every colour. For apps and sites whose header should show who is signed in.
FAQ
How do I connect it to a real sign-in?
Two places hold the demo. submit accepts any non-empty email and calls setUser({ email, name }); replace its body with your provider's call (an email link, a password, a social button) and set the user from the session you get back. endSession clears the user; call your provider's sign-out there. In an app that already has a session, start user from it and the bar renders signed in on load. Nothing is stored: the demo forgets the visitor on reload.
How does the dialog behave?
Sign in and Sign up open the same dialog with different words: its title and one line of help change, the field and the Continue button don't. Focus lands in the email field, Tab stays inside the dialog until it closes, and the field's label, the demo note and any error are tied to it for a screen reader. Continuing with an empty field shows "Enter an email to continue." and keeps focus on the field; typing clears it. Escape or the close button closes the dialog and puts focus back on the button that opened it.
What happens once you're signed in?
The two buttons are replaced by one button naming the account (the avatar's initials and the name) that opens the menu. The menu is portalled over the page: an identity header with the name and email, Profile, Settings and Billing as links, then Sign out. Escape closes it and focus returns to the avatar button; choosing Sign out swaps Sign in and Sign up back and moves focus to Sign in (to Sign up on a phone, where Sign in lives in the sheet). A status line that is present from load says "Signed in as …" and "Signed out", once each. Opening the menu with Enter or Space puts focus on the menu itself; the arrow keys move onto its items.
How does it work on a phone?
Below the md breakpoint the bar shows the wordmark, Sign up (or the avatar once signed in) and a menu button, and nothing wraps at 320 pixels. The menu button opens a sheet from the top whose header lines up with the bar, then the links with the current page tinted, then the same two states: Sign in and Sign up, or the account with Profile, Settings, Billing and Sign out. Choosing Sign in or Sign up in the sheet closes the sheet first and opens the dialog a moment later, so only one modal is ever open; Escape in that dialog returns focus to the menu button. Focus moves into the sheet and stays there until it closes.
How do I change the links and the account menu?
PAGES at the top of the file holds the links (mark the page you're on with current: true, which gives it aria-current="page" and the stroke on the bar's bottom edge), and ACCOUNT holds the entries after the header: each is a label and an icon, and every href is #. The bar and the sheet read the same arrays, so they never drift apart.
The menu's entries use asChild, which receives their props: spread them onto your router's link.
What moves, and what happens with reduced motion?
Nothing moves on load: the navbar is chrome and is simply there. The dialog, the menu and the sheet use the catalog's own entrances, a band of light sweeps across Sign up once on hover and keyboard focus, and the menu's chevron turns. With reduced motion the dialog, the menu and the sheet appear without sliding, zooming or fading (the dimmed backdrop behind a dialog still fades), and the light fades in where it stands.