# DesktopLoginScreen > A desktop OS sign-in screen. Wallpaper, a clock with a greeting, and a card with the mark and the Nasaq LoginForm, plus optional power buttons. Source: https://docs.nasaqui.com/components/desktop-login-screen ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/desktop-login-screen.json ``` The first screen of a web OS: the time, a greeting and a sign-in card over a wallpaper. The form is `LoginForm`, so passkeys, providers, errors and rate limiting work the same as on any Nasaq sign-in page. ## When to use - Signing in to a desktop-style app built with `DesktopShell`. ## When not to use - A person already signed in coming back after idle: use `LockScreen`. - A normal web app sign-in page: use `AuthLayout` with `LoginForm`. ## Import ```tsx import { DesktopLoginScreen } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { DesktopLoginScreen } from "@fadymondy/nasaq/web"; export function SignIn() { return ( { const ok = await api.signIn(email, password); if (!ok) return { error: "Incorrect email or password." }; }} /> ); } declare const api: { signIn(e: string, p: string): Promise }; ``` ## Anatomy ``` DesktopLoginScreen data-slot="desktop-login-screen" ├─ wallpaper + scrim aria-hidden ├─ clock greeting, time, date (showClock) ├─ card
labelled by the title │ ├─ mark, title, description │ ├─ LoginForm | children │ └─ footer └─ power actions