Terminal Sign In

Auth29: Terminal Sign In

A full-height CLI-window sign-in card rendered in a monospace typeface: a fake title bar with three dots and a window title, a $ command line, a comment line, a prompt glyph beside a borderless email input, a full-width submit button trailing a CornerDownLeft icon, and a footer hint line, all driven by a single optional labels object.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth29?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth29?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth29.tsx, plus the button and input shadcn/ui primitives it uses for the submit action and the email field.

Quick start

The installed file exports auth29Demo alongside the block: the exact props behind the preview above. Spread it to get a working terminal sign-in card in one line.

import { Auth29, auth29Demo } from "@/components/beste/block/auth29";

export default function LoginPage() {
  return <Auth29 {...auth29Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Auth29 } from "@/components/beste/block/auth29";

export default function LoginPage() {
  return (
    <Auth29
      labels={{
        windowTitle: "acme — auth login",
        command: "acme auth login",
        comment: "# enter your email for a magic link",
        prompt: "❯",
        inputPlaceholder: "you@example.com",
        submit: "Send login link",
        footerHint: "Press ↵ to continue · ⌃C to cancel",
      }}
    />
  );
}

Props

type Labels = {
  windowTitle?: string;
  command?: string;
  comment?: string;
  prompt?: string;
  inputPlaceholder?: string;
  submit?: string;
  footerHint?: string;
};

Behavior notes

• Every visible piece of text is conditional: windowTitle, command, comment, prompt, submit, and footerHint each render only when their label is truthy, so passing an empty labels object (the default) yields just the window chrome, the input, and nothing else.
• The <form>'s onSubmit calls e.preventDefault() and nothing else; there is no onSubmit prop, no state, and no callback, so capturing the entered email and sending a link is entirely left to the integrator.
• The email input is uncontrolled: it has no value, no onChange, and no lifted state, so its contents are never exposed to the parent.
• inputPlaceholder does double duty as both the input's placeholder and the text of its sr-only <label>, so screen readers announce the placeholder string as the field name.
• The three title-bar dots are decorative <span> elements (bg-muted-foreground/30), not interactive window controls.
• The outer section is min-h-screen and centers its content, so the block expects to own the full viewport height rather than sit inline in a larger page.
• Field ids are derived from React's useId, keeping the <label htmlFor>/<input id> pairing stable and unique across multiple instances on one page.