# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/auth53. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Auth](/blocks/auth)
5. /
6. Passwordless Sign-In Card

# Passwordless Sign-In Card[PRO](/pricing)

A single narrow card that asks only for an email, then replaces itself in place with a sent state that echoes the address back and offers to start again with another one.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/auth53`

## Auth53: Passwordless Sign-In Card

A single narrow card that asks only for an email, then replaces itself in place with a sent state that echoes the address back and offers to start again with another one.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/auth53.tsx`, the `badge6` component used for the eyebrow, and the shadcn/ui `input` and `button` primitives behind the form.

### Quick start

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

tsxCopy

```
import { Auth53, auth53Demo } from "@/components/beste/block/auth53";

export default function SignInPage() {
  return <Auth53 {...auth53Demo} />;
}
```

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

tsxCopy

```
import { Auth53 } from "@/components/beste/block/auth53";

export default function SignInPage() {
  return (
    <Auth53
      eyebrow="Members"
      heading="Sign in without a password"
      description="Type the address you subscribed with and we will send a link."
      label="Email address"
      placeholder="you@studio.com"
      submitLabel="Send me a link"
      sentHeading="Check your inbox"
      sentDescription="The link works once and expires in fifteen minutes."
      resendLabel="Use a different address"
      help={{ label: "Not sure which address you used?", href: "/help/address" }}
      note="Members get the archive in full."
    />
  );
}
```

### Props

| Prop            | Type     | Default | Description                         |
| --------------- | -------- | ------- | ----------------------------------- |
| eyebrow         | string   | –       | Badge6 label at the top of the card |
| heading         | string   | –       | Card heading                        |
| description     | string   | –       | What will happen next               |
| label           | string   | –       | Accessible label on the field       |
| placeholder     | string   | –       | Placeholder in the field            |
| submitLabel     | string   | –       | Label on the submit button          |
| sentHeading     | string   | –       | Heading of the sent state           |
| sentDescription | string   | –       | Line after the echoed address       |
| resendLabel     | string   | –       | Button that returns to the form     |
| help            | HelpLink | –       | Link under the form                 |
| note            | string   | –       | Line under the card                 |
| className       | string   | –       | Extra classes for the outer section |

tsCopy

```
type HelpLink = {
  label: string;
  href: string;
};
```

### Behavior notes

* The sent state replaces the card's contents rather than appearing under them, so there is one card on the page in both states and nothing shifts.
* The submitted address is read from `FormData` and echoed back in the sent state, which is what lets a reader catch a typo before waiting for an email.
* State is a single string: an empty one means the form, a filled one means sent. `resendLabel` clears it and returns to the form.
* The field is typed `email` and `required`, so validation happens in the browser before the handler runs.
* Nothing is sent. Point the submit at your own passwordless endpoint when you wire it up.

## More Auth blocks

[View all Auth](/blocks/auth)

[](/block/auth51)

PRO

auth51

### Passwordless Code Sign In

A centered passwordless card that advances in place from a work email step with an SSO fallback to a monospace one-time-code entry with resend and go-back controls.

[](/block/auth34)

PRO

auth34

### Email-First Sign In

Full-height progressive sign-in that asks for the email first, then reveals the password step with the chosen email shown and editable. Perfect for modern email-first and adaptive authentication flows.

[](/block/auth6)

FREE

auth6

### Magic Link Sign In

Full-height passwordless sign-in screen with a single email field, a send-magic-link button, a helper note, and social login providers below a divider. Perfect for passwordless and email-link authentication flows.

[](/block/auth21)

PRO

auth21

### Passkey Sign In

Full-height passwordless sign-in screen with a fingerprint icon, a continue-with-passkey button, and a password fallback below a divider. Perfect for WebAuthn and biometric authentication flows.

[](/block/auth1)

FREE

auth1

### Centered Sign In Card

Full-height centered sign-in screen with social login providers, email and password fields, a show/hide password toggle, remember-me checkbox, and forgot-password link. Perfect for SaaS apps, dashboards, and member portals.

[](/block/auth52)

PRO

auth52

### Password Reset With Live Strength

A centered password reset card whose segmented strength meter and checked requirement list update as the field is typed, with a confirmation field and a breach-check note underneath.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.