Auth (Login & Signup)

Authentication page templates with email/password forms, social login options, and terms acceptance. Uses Card, Input, Label, Checkbox, Button, and Separator atoms.

Import

import {
  Button, Input, Label, Checkbox, Separator, Typography,
  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
} from "poyraz-ui/atoms";

Login

Sign-in form with remember me, forgot password, and social auth buttons.

Welcome back

PasswordForgot?

Remember me

or continue with

Don't have an account? Sign up

import {
  Button, Input, Label, Checkbox, Separator, Typography,
  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
} from "poyraz-ui/atoms";

export function LoginPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-muted px-4">
      <Card className="w-full max-w-xs">
        <CardHeader className="text-center">
          <CardTitle>Welcome back</CardTitle>
          <CardDescription>Sign in to your account</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="space-y-1.5">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="name@example.com" />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="password">Password</Label>
            <Input id="password" type="password" placeholder="••••••••" />
          </div>
          <div className="flex items-center gap-2">
            <Checkbox id="remember" />
            <label htmlFor="remember" className="text-xs text-muted-foreground">
              Remember me
            </label>
          </div>
          <Button className="w-full">Sign In</Button>
        </CardContent>
        <CardFooter className="justify-center">
          <Typography variant="muted">
            Don't have an account? <a href="/signup" className="text-red-600">Sign up</a>
          </Typography>
        </CardFooter>
      </Card>
    </div>
  );
}

Signup

Registration form with name fields, password requirements, terms checkbox, and social auth.

Create an account

Get started with Poyraz UI

First name

Last name

Password

At least 8 characters with one uppercase and one number.

I agree to the Terms of Service and Privacy Policy

or sign up with

Already have an account? Sign in

import {
  Button, Input, Label, Checkbox, Separator, Typography,
  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
} from "poyraz-ui/atoms";

export function SignupPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-muted px-4">
      <Card className="w-full max-w-xs">
        <CardHeader className="text-center">
          <CardTitle>Create an account</CardTitle>
          <CardDescription>Get started with Poyraz UI</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1.5">
              <Label htmlFor="first">First name</Label>
              <Input id="first" placeholder="Poyraz" />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="last">Last name</Label>
              <Input id="last" placeholder="Avsever" />
            </div>
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="name@example.com" />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="password">Password</Label>
            <Input id="password" type="password" placeholder="••••••••" />
          </div>
          <div className="flex items-start gap-2">
            <Checkbox id="terms" className="mt-0.5" />
            <label htmlFor="terms" className="text-xs text-muted-foreground">
              I agree to the Terms and Privacy Policy
            </label>
          </div>
          <Button className="w-full">Create Account</Button>
        </CardContent>
        <CardFooter className="justify-center">
          <Typography variant="muted">
            Already have an account? <a href="/login" className="text-red-600">Sign in</a>
          </Typography>
        </CardFooter>
      </Card>
    </div>
  );
}