Auth17: Signed Out Confirmation

Full-height signed-out screen: a centered icon in a neutral circle, a heading and message, a primary sign-back-in button, and a secondary return-home link. Entirely static, with no form fields or interactive state.

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/auth17?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/auth17.tsx and the button shadcn/ui primitive it's built on.

Quick start

The installed file exports auth17Demo alongside the block: the exact props behind the preview above. Spread it to get a working signed-out screen in one line.

import { Auth17, auth17Demo } from "@/components/beste/block/auth17";

export default function SignedOutPage() {
  return <Auth17 {...auth17Demo} />;
}

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

import { LogOut } from "lucide-react";
import { Auth17 } from "@/components/beste/block/auth17";

export default function SignedOutPage() {
  return (
    <Auth17
      icon={<LogOut className="size-7" />}
      heading="You've been signed out"
      description="Your session has ended. Sign back in whenever you're ready."
      primaryButton={{ label: "Sign back in", href: "/sign-in" }}
      secondaryLink={{ label: "Return to homepage", href: "/" }}
    />
  );
}

Props

Behavior notes

• Fully static and presentational: there is no <form>, no inputs, and no local state.
• primaryButton renders as a filled Button, secondaryLink as a variant="ghost" Button; both are asChild links stacked full-width in a flex-col gap-3 container, and either can be omitted independently.
• The icon circle uses neutral bg-muted text-muted-foreground, unlike auth12's green success circle, matching a neutral rather than a positive/negative state.
• icon, heading, description, primaryButton, and secondaryLink are each individually optional; any subset can be dropped without leaving layout gaps.