shadcn.io is not affiliated with official shadcn/ui
Terminal Side Panel Login Block for Vue
A split sign-in page for a command-line deploy tool: the form beside a terminal showing the command-line sign-in, with a Copy button on the command. The terminal follows the page theme.
Installation
Overview
Show the other way in beside the sign-in with this terminal side panel login block for Vue with Ark UI. It's the sign-in of Termwright, a command-line deploy tool: the page's two side rails run its full height and one band crosses the screen between two rules. The form sits at the start of the band: a Field with the email Input, another with the Password Input and a "Forgot password?" link, and the Shine Button, the only colored control. At the end, behind a divider that meets both rules at a plus mark, a terminal shows the command-line sign-in: the command with a Copy Button, the address to open, the code to enter and "Waiting for approval…". Despite the slug, the terminal isn't dark by force: it follows your theme, light in a light theme and dark in a dark one. Nothing runs here; Copy only puts the command on the clipboard and a polite status message says so. On a phone the terminal is gone and the form takes the screen. It's built from Copy Button, Field, Input, Password Input, Shine Button and Guides, with a CSS entrance only. For a developer tool with a device sign-in.
FAQ
What happens when I sign in, and what stays in the page?
Nothing leaves the page, and nothing runs. Sign in waits under a spinner for less than a second, then shows "You're signed in" with the address you typed, and a polite status message says nothing was sent; Sign out brings the form back with your email still filled in. The terminal is typed text: the command, the address and the code ABCD-4821 are made up, and nothing waits for approval. To wire it for real, post the email and password to your auth endpoint where the code says so, and for the device flow have your CLI print the verification address and the one-time code your server issued for it.
Why isn't the terminal dark?
The block follows the page theme, so the terminal is a card in whatever your theme uses: light in a light theme, dark in a dark one, with the same border and text tokens as everything else. Nothing forces a dark scope, which also keeps the contrast of the text correct in every preset. If your product's terminal is dark in both themes, put dark on that one box and mark it with a comment.
What does the Copy button do, and how is it announced?
It copies termwright login, without the prompt, to the clipboard and swaps its icon for a check for three seconds. A polite status message, which the page already has for the sign-in, reads "Copied the command" so screen reader users hear it, and if the clipboard refuses (no permission, or a page that isn't served over HTTPS) it says "Couldn't copy" and tells you to select the text. The button is named "Copy the sign-in command" and the text is real text you can also select by hand.
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. The browser's own validation bubbles are turned off with noValidate, so the messages look the same in every browser, and each field keeps a line for its problem even when there is none, so a problem never pushes the page.
Why is the form first in the page and the terminal second?
The form comes first in the markup, so Tab order and the reading order start with the sign-in and its heading; the terminal follows, and on a phone, where it's gone, nothing has to be reordered. It's at the end of the band, behind a divider, in a left-to-right layout and at the start side's mirror in right-to-left. The terminal's text is set dir="ltr" so the command and the address read correctly in a right-to-left page.