# Login 1

> Login 1 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-login-1).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-login-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-login-1-light-3c05ba03d7cbcd51.png
- Registry item: https://uiable.com/r/block-login-1.json
- Categories: login
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-login-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@uiable/button`, `@uiable/card`, `@uiable/checkbox`, `@uiable/input`, `@uiable/logo`

## Files

### `src/components/uiable/blocks/login/login-1/login-1.tsx`

```tsx
// next
import Link from "next/link"

// shadcn
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"

// project-imports
import Logo from "@/components/uiable/layout/shared/logo"

//  ------------------------------ | LOGIN | ------------------------------  //

export default function Login1() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[url('https://cdn.uiable.com/authentication/img-auth-bg.jpg')] bg-cover bg-center px-4 py-10 dark:bg-[url('https://cdn.uiable.com/authentication/img-auth-bg-dark.jpg')]">
      <Card className="w-full max-w-md shadow-none">
        <CardContent className="space-y-4 p-6 sm:p-10">
          <div className="text-center">
            <Logo className="mb-2 justify-center" link={false} />
          </div>

          <div className="mb-4 text-center">
            <h4 className="mb-4 text-center font-medium">
              Login with your email
            </h4>
          </div>

          <div className="grid gap-0">
            <div className="mb-3 grid gap-2">
              <Input
                id="email"
                type="email"
                placeholder="Email Address"
                required
              />
            </div>
            <div className="mb-4 grid gap-2">
              <Input
                id="password"
                type="password"
                placeholder="Password"
                required
              />
            </div>
            <div className="mt-1 flex flex-wrap items-center justify-between gap-2">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="remember"
                  className="rounded border-[#bec8d0] data-[state=checked]:border-primary data-[state=checked]:bg-primary"
                  defaultChecked
                />
                <label
                  htmlFor="remember"
                  className="peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                >
                  Remember me?
                </label>
              </div>
              <Link href="#" className="text-primary">
                Forgot Password?
              </Link>
            </div>
            <Button className="mt-4 w-full">Login</Button>
          </div>
          <div className="mt-4 flex flex-wrap items-end justify-between gap-2">
            <h6 className="f-w-500 mb-0">Don't have an Account?</h6>
            <Link href="#" className="text-primary">
              Create Account
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
```