shadcn.io is not affiliated with official shadcn/ui
Compact Inline Sign In Login Block for Vue
A sign-in strip as a panel: a short header over one framed row with the product's mark, an email, a password and a Sign in button, which stack below 1024 px and swap for a row of the same height once signed in.
Installation
Overview
Put a sign-in where the content is, with this compact inline login block for Vue with Ark UI. It's the strip Tackline, a classified-ads site, shows above its listings: a short header with a heading and one sentence over one framed panel with a plus mark on each corner, and in the panel a single row of the product's mark, an email Field with its Input, a password field with its show and hide toggle and a "Forgot?" link, and the Shine Button, the only colored control, lined up under the fields' labels. From 1024 pixels it's one row; below that the fields stack and the button fills the width. Signing in waits a moment with a spinner, then swaps the row for a row of the same height that says who is signed in, with a ghost Sign out button, so nothing around the strip moves; each field keeps a line for its problem, so a problem never moves it either. It's built from Field, Input, Password Input, Button, Shine Button and Guides, with a CSS entrance only. For a site that asks visitors to sign in without leaving the page they came for.
FAQ
What happens when I sign in, and what stays in the page?
Nothing leaves the page. Sign in waits under a spinner for less than a second, then shows "Signed in as" with the address you typed, and a polite status message says nothing was sent; Sign out brings the fields back with your email still filled in and focus on the password. To wire it for real, post the email and password to your auth endpoint where the code says so, keep the busy state until it answers, then show who signed in, or show its error under the field it concerns.
How does it become one row, and what happens below 1024 px?
The form is a grid: from the lg breakpoint it has four columns (the mark, the email, the password and the button), the fields share the space left over and the button takes what it needs. Below that it's one column, the mark is dropped, and the button fills the width. The panel is max-w-4xl, which is why the row fits at 1024 px; in a narrower container, switch to the stacked layout sooner by changing the breakpoint.
Does the strip change height when I sign in or something is wrong?
No. The row of fields and the signed-in row are laid in one grid cell, so the cell is as tall as the taller one and the other waits unseen and out of reach; each field's problem line is always there, even when empty. Check it by pressing Sign in empty, then signing in: the panel keeps its height.
Why is the Sign in button never disabled?
A disabled button can't explain itself, and keyboard users can't reach it. Here it stays enabled: pressing it with an empty or malformed email, or no password, marks those fields invalid, writes one sentence under each and moves focus to the first, which reads its problem out. Typing clears that field's problem.
Do password managers fill it in?
Yes. The email field is type="email" with autocomplete="username", and the password field autocomplete="current-password", which is what browsers and password managers look for on a sign-in form, and both fields have real labels, which stay visible above the fields.
Is it usable with a keyboard and a screen reader?
Tab runs through the email, the password, its show and hide toggle, Forgot and Sign in; Enter in either field signs in. The heading names the form, each problem is tied to its field, and after signing in focus moves to the line that says who signed in, while a polite status message says what happened.