# auth-01

> auth-01

A shadcn/ui block from the [@intentui](https://intentui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/intentui/auth-01).

- Page, with a live preview: https://shadcn.exchange/r/intentui/auth-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/intentui/auth-01-light-e744a6910a9396a9.png
- Registry item: https://intentui.com/r/auth-01
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://intentui.com/r/auth-01
```

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

## Dependencies

- npm packages: `react-aria-components`
- Registry items: `https://intentui.com/r/avatar`, `https://intentui.com/r/button`, `https://intentui.com/r/checkbox`, `https://intentui.com/r/field`, `https://intentui.com/r/input`, `https://intentui.com/r/link`, `https://intentui.com/r/text`, `https://intentui.com/r/text-field`

## Files

### `registry/blocks/auth-01/page.tsx`

```tsx
"use client"

import { useState } from "react"
import { Form } from "react-aria-components/Form"
import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Checkbox, CheckboxField } from "@/components/ui/checkbox"
import { Description, FieldError, Fieldset, Label, Legend } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Link } from "@/components/ui/link"
import { Text, TextLink } from "@/components/ui/text"
import { TextField } from "@/components/ui/text-field"

export default function Page() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  return (
    <main className="flex min-h-dvh items-center justify-center p-6">
      <div className="w-full max-w-sm">
        <h1 className="sr-only">Sign in</h1>
        <Link href="#" aria-label="Goto homepage" className="mb-3 inline-block">
          <Avatar isSquare src="https://design.intentui.com/logo" size="md" />
        </Link>
        <Form>
          <Fieldset>
            <Legend className="text-xl/6">Sign in</Legend>
            <Text>
              Access your account to manage projects, view analytics, and collaborate with your
              team.
            </Text>
            <TextField isRequired value={email} onChange={setEmail}>
              <Label>Email address</Label>
              <Input type="email" placeholder="Your email address" />
              <FieldError />
            </TextField>
            <TextField isRequired value={password} onChange={setPassword}>
              <div className="mb-2 flex items-center justify-between">
                <Label>Password</Label>
                <TextLink href="#" className="text-base/6 sm:text-sm/6">
                  Forgot password?
                </TextLink>
              </div>
              <Input placeholder="Ssshtt, it's a secret" type="password" />
              <FieldError />
            </TextField>
            <CheckboxField>
              <Checkbox>Remember me</Checkbox>
              <Description>
                Keep me signed in on this device for faster access next time.
              </Description>
            </CheckboxField>
          </Fieldset>
          <Button type="submit" className="mt-6 w-full">
            Sign in
          </Button>
        </Form>
      </div>
    </main>
  )
}
```