# Auth 1

> Modern sign-in page with particle background and social buttons.

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

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

## Install

```bash
npx shadcn@latest add https://efferd.com/r/auth-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: `@efferd/logo`, `@efferd/google-icon`, `@efferd/github-icon`, `button`, `@magicui/particles`

## Files

### `registry/blocks/auth/1/index.tsx`

```tsx
import { GithubIcon } from "@/components/icons/github-icon";
import { GoogleIcon } from "@/components/icons/google-icon";
import { Logo } from "@/components/logo";
import { Particles } from "@/components/ui/particles";
import { Button } from "@/components/ui/button";

export function AuthPage() {
	return (
		<div className="relative w-full md:h-screen md:overflow-hidden">
			<Particles
				className="absolute inset-0"
				color="#666666"
				ease={20}
				quantity={120}
			/>
			<div className="relative mx-auto flex min-h-screen max-w-5xl flex-col justify-center px-8">
				<Button asChild className="absolute top-4 left-4" variant="ghost">
					<a href="#">
						<IconPlaceholder
							data-icon="inline-start"
							hugeicons="ArrowLeft01Icon"
							lucide="ChevronLeftIcon"
							phosphor="CaretLeftIcon"
							remixicon="RiArrowLeftSLine"
							tabler="IconChevronLeft"
						/>
						Home
					</a>
				</Button>

				<div className="mx-auto space-y-4 sm:w-sm">
					<Logo className="h-5" />
					<div className="flex flex-col space-y-1">
						<h1 className="font-bold font-heading text-2xl tracking-wide">
							Sign In or Join Now!
						</h1>
						<p className="text-base text-muted-foreground">
							login or create your efferd account.
						</p>
					</div>
					<div className="space-y-2">
						<Button className="w-full" type="button">
							<GoogleIcon data-icon="inline-start" />
							Continue with Google
						</Button>
						<Button className="w-full" type="button">
							<GithubIcon data-icon="inline-start" />
							Continue with GitHub
						</Button>
					</div>
					<p className="mt-8 text-muted-foreground text-sm">
						By clicking continue, you agree to our{" "}
						<a
							className="underline underline-offset-4 hover:text-primary"
							href="#"
						>
							Terms of Service
						</a>{" "}
						and{" "}
						<a
							className="underline underline-offset-4 hover:text-primary"
							href="#"
						>
							Privacy Policy
						</a>
						.
					</p>
				</div>
			</div>
		</div>
	);
}
```