# Reset Password 4

A shadcn/ui block from the [@diarmuradi](https://diarmuradi.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/diarmuradi/reset-password-4).

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

## Install

```bash
npx shadcn@latest add https://diarmuradi.com/r/reset-password-4.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: `https://diarmuradi.com/r/styles/base-nova/button.json`, `https://diarmuradi.com/r/styles/base-nova/fancy-button.json`, `https://diarmuradi.com/r/styles/base-nova/field.json`, `https://diarmuradi.com/r/styles/base-nova/icons.json`, `https://diarmuradi.com/r/styles/base-nova/input.json`

## Files

### `reset-password.tsx`

```tsx
"use client"

import { useId } from "react"
import Link from "next/link"

import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { FancyButton } from "@/components/ui/fancy-button"
import { Icons } from "@/components/ui/icons"

export function ResetPassword() {
  const id = useId()
  return (
    <main
      aria-label="Reset password"
      className="flex w-full max-w-sm flex-col items-center gap-4 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <FancyButton
        size="icon-lg"
        aria-label="Home"
        role="link"
        className="size-14 rounded-xl"
        render={<Link href="/" />}
      >
        <Icons.Logo aria-hidden="true" className="size-10" />
      </FancyButton>

      <div className="flex w-full flex-col gap-6 rounded-4xl bg-card p-6 shadow-elevated-lg">
        <div className="text-center">
          <h1 className="text-xl font-semibold tracking-tight text-balance sm:text-2xl">
            Reset password
          </h1>
          <p className="text-base text-muted-foreground">
            Enter your email to reset your password.
          </p>
        </div>

        <FieldGroup className="gap-3">
          <Field className="gap-1">
            <FieldLabel htmlFor={`${id}-email`}>Email</FieldLabel>
            <Input
              id={`${id}-email`}
              type="email"
              placeholder="contact@diarmuradi.com"
              className="h-10 bg-transparent"
            />
          </Field>

          <FancyButton type="button" size="lg" className="w-full">
            Reset password
          </FancyButton>
        </FieldGroup>
      </div>

      <div className="flex flex-col items-center gap-1 text-center text-sm text-muted-foreground sm:flex-row sm:justify-center">
        <span>{"Can't access email?"}</span>
        <Button
          variant="link"
          className="h-auto p-0"
          nativeButton={false}
          role="link"
          render={<Link href="/sign-up" />}
        >
          Contact support
        </Button>
      </div>
    </main>
  )
}
```