# Reset Password 1

> Reset Password 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-reset-password-1).

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

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-reset-password-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/field`, `@uiable/input`

## Files

### `src/components/uiable/blocks/reset-password/reset-password-1/reset-password-1.tsx`

```tsx
// shadcn
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

//  ------------------------------ | RESET PASSWORD 1 | ------------------------------  //

export default function ResetPassword1() {
  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="mb-4">
            <h3 className="mb-2 text-xl font-semibold text-foreground">
              Reset Password
            </h3>
            <p className="text-sm text-muted-foreground">
              Please choose your new password
            </p>
          </div>

          <FieldGroup className="mt-4">
            <Field>
              <FieldLabel htmlFor="password">Password</FieldLabel>
              <Input
                id="password"
                type="password"
                required
                placeholder="Password"
              />
            </Field>

            <Field>
              <FieldLabel htmlFor="confirmPassword">
                Confirm Password
              </FieldLabel>
              <Input
                id="confirmPassword"
                type="password"
                required
                placeholder="Confirm Password"
              />
            </Field>

            <Button type="button" className="mt-2 w-full hover:scale-[1.02]">
              Reset Password
            </Button>
          </FieldGroup>
        </CardContent>
      </Card>
    </div>
  )
}
```