Authentication
Sign in
A sign-in page beside a glimpse of the product, with a password or a code sent by email.
<div class="grid min-h-dvh bg-base-100 lg:grid-cols-2">
<div class="flex flex-col gap-6 p-6 md:p-10">
<a class="flex items-center gap-2 self-start font-medium" href="#">
<span class="grid size-8 place-items-center rounded-lg bg-primary text-primary-content">
<span class="icon icon-stack-2 size-5"></span>
</span>
Pelatform
</a>
<div class="flex flex-1 items-center justify-center">
<form class="flex w-full max-w-sm flex-col gap-6" method="post">
<div class="flex flex-col gap-1">
<h1 class="text-2xl font-semibold">Sign in</h1>
<p class="text-sm text-base-content/70">Use your work email to continue.</p>
</div>
<a class="btn w-full" href="#" style="--plf-button-bg: #fff; --plf-button-color: #1f1f1f; --plf-button-border: #747775; --plf-button-hover-bg: #f2f2f2">
<svg class="btn-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path fill="#ea4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
<path fill="#4285f4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
<path fill="#fbbc05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
<path fill="#34a853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
</svg>
Sign in with Google
</a>
<div class="flex items-center gap-3 text-xs text-base-content/70">
<span class="divider flex-1"></span>
or continue with email
<span class="divider flex-1"></span>
</div>
<div class="alert alert-error" role="alert" hidden>
<div class="alert-body">
<div class="alert-content">
<p class="alert-description">The email or password is incorrect. Check them, or reset your password.</p>
</div>
</div>
</div>
<div class="flex flex-col gap-4">
<div class="field">
<label class="field-label" for="sign-in-email">Email</label>
<div class="input-group">
<span class="input-group-addon">
<span class="icon icon-mail"></span>
</span>
<input class="input-group-control" id="sign-in-email" name="email" type="email" dir="ltr" autocomplete="email" placeholder="name@example.com" required>
</div>
</div>
<div class="field">
<div class="flex items-center justify-between gap-2">
<label class="field-label" for="sign-in-password">Password</label>
<a class="link link-muted text-sm" href="#">Forgot password?</a>
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="icon icon-key"></span>
</span>
<input class="input-group-control" id="sign-in-password" name="password" type="password" autocomplete="current-password" required>
<button class="input-group-action input-group-addon" type="button" data-plf-password-toggle hidden></button>
</div>
</div>
<div class="choice">
<input class="checkbox" id="sign-in-remember" name="remember" type="checkbox">
<label class="choice-label" for="sign-in-remember">Keep me signed in</label>
</div>
</div>
<div class="flex flex-col gap-3">
<button class="btn btn-primary w-full">Sign in</button>
<div class="flex items-center gap-3 text-xs text-base-content/70">
<span class="divider flex-1"></span>
or
<span class="divider flex-1"></span>
</div>
<a class="btn btn-outline w-full" href="#">Email me a sign-in code</a>
</div>
<p class="text-center text-sm text-base-content/70">New to Pelatform? <a class="link" href="#">Create an account</a></p>
</form>
</div>
</div>
<div class="hidden items-center justify-center bg-base-200 p-10 lg:flex" data-plf-root data-plf-theme="dark">
<div class="flex w-full max-w-xl flex-col gap-8">
<div class="flex flex-col gap-2">
<p class="text-3xl font-semibold">Know where every invoice stands.</p>
<p class="text-base-content/70">Revenue, customers and invoices for your workspace, in one place.</p>
</div>
<div class="mockup-window">
<img src="/previews/assets/mockup-dashboard.webp" width="2560" height="1520" alt="">
</div>
</div>
</div>
</div><div class="plf:grid plf:min-h-dvh plf:bg-base-100 plf:lg:grid-cols-2">
<div class="plf:flex plf:flex-col plf:gap-6 plf:p-6 plf:md:p-10">
<a class="plf:flex plf:items-center plf:gap-2 plf:self-start plf:font-medium" href="#">
<span class="plf:grid plf:size-8 plf:place-items-center plf:rounded-lg plf:bg-primary plf:text-primary-content">
<span class="plf:icon plf:icon-stack-2 plf:size-5"></span>
</span>
Pelatform
</a>
<div class="plf:flex plf:flex-1 plf:items-center plf:justify-center">
<form class="plf:flex plf:w-full plf:max-w-sm plf:flex-col plf:gap-6" method="post">
<div class="plf:flex plf:flex-col plf:gap-1">
<h1 class="plf:text-2xl plf:font-semibold">Sign in</h1>
<p class="plf:text-sm plf:text-base-content/70">Use your work email to continue.</p>
</div>
<a class="plf:btn plf:w-full" href="#" style="--plf-button-bg: #fff; --plf-button-color: #1f1f1f; --plf-button-border: #747775; --plf-button-hover-bg: #f2f2f2">
<svg class="plf:btn-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path fill="#ea4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
<path fill="#4285f4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
<path fill="#fbbc05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
<path fill="#34a853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
</svg>
Sign in with Google
</a>
<div class="plf:flex plf:items-center plf:gap-3 plf:text-xs plf:text-base-content/70">
<span class="plf:divider plf:flex-1"></span>
or continue with email
<span class="plf:divider plf:flex-1"></span>
</div>
<div class="plf:alert plf:alert-error" role="alert" hidden>
<div class="plf:alert-body">
<div class="plf:alert-content">
<p class="plf:alert-description">The email or password is incorrect. Check them, or reset your password.</p>
</div>
</div>
</div>
<div class="plf:flex plf:flex-col plf:gap-4">
<div class="plf:field">
<label class="plf:field-label" for="sign-in-email">Email</label>
<div class="plf:input-group">
<span class="plf:input-group-addon">
<span class="plf:icon plf:icon-mail"></span>
</span>
<input class="plf:input-group-control" id="sign-in-email" name="email" type="email" dir="ltr" autocomplete="email" placeholder="name@example.com" required>
</div>
</div>
<div class="plf:field">
<div class="plf:flex plf:items-center plf:justify-between plf:gap-2">
<label class="plf:field-label" for="sign-in-password">Password</label>
<a class="plf:link plf:link-muted plf:text-sm" href="#">Forgot password?</a>
</div>
<div class="plf:input-group">
<span class="plf:input-group-addon">
<span class="plf:icon plf:icon-key"></span>
</span>
<input class="plf:input-group-control" id="sign-in-password" name="password" type="password" autocomplete="current-password" required>
<button class="plf:input-group-action plf:input-group-addon" type="button" data-plf-password-toggle hidden></button>
</div>
</div>
<div class="plf:choice">
<input class="plf:checkbox" id="sign-in-remember" name="remember" type="checkbox">
<label class="plf:choice-label" for="sign-in-remember">Keep me signed in</label>
</div>
</div>
<div class="plf:flex plf:flex-col plf:gap-3">
<button class="plf:btn plf:btn-primary plf:w-full">Sign in</button>
<div class="plf:flex plf:items-center plf:gap-3 plf:text-xs plf:text-base-content/70">
<span class="plf:divider plf:flex-1"></span>
or
<span class="plf:divider plf:flex-1"></span>
</div>
<a class="plf:btn plf:btn-outline plf:w-full" href="#">Email me a sign-in code</a>
</div>
<p class="plf:text-center plf:text-sm plf:text-base-content/70">New to Pelatform? <a class="plf:link" href="#">Create an account</a></p>
</form>
</div>
</div>
<div class="plf:hidden plf:items-center plf:justify-center plf:bg-base-200 plf:p-10 plf:lg:flex" data-plf-root data-plf-theme="dark">
<div class="plf:flex plf:w-full plf:max-w-xl plf:flex-col plf:gap-8">
<div class="plf:flex plf:flex-col plf:gap-2">
<p class="plf:text-3xl plf:font-semibold">Know where every invoice stands.</p>
<p class="plf:text-base-content/70">Revenue, customers and invoices for your workspace, in one place.</p>
</div>
<div class="plf:mockup-window">
<img src="/previews/assets/mockup-dashboard.webp" width="2560" height="1520" alt="">
</div>
</div>
</div>
</div>import { useId, type CSSProperties } from 'react';
import {
Alert, AlertBody, AlertContent, AlertDescription, Button, buttonClass, Checkbox, Field, Icon, InputGroup,
InputGroupAddon, InputGroupControl, InputGroupPasswordToggle, Link, MockupWindow,
} from '@pelatform/react';
export function Example() {
const passwordId = useId();
return (
<div className="grid min-h-dvh bg-base-100 lg:grid-cols-2">
<div className="flex flex-col gap-6 p-6 md:p-10">
<a className="flex items-center gap-2 self-start font-medium" href="#">
<span className="grid size-8 place-items-center rounded-lg bg-primary text-primary-content">
<Icon name="stack-2" className="size-5" />
</span>
Pelatform
</a>
<div className="flex flex-1 items-center justify-center">
<form className="flex w-full max-w-sm flex-col gap-6" method="post">
<div className="flex flex-col gap-1">
<h1 className="text-2xl font-semibold">Sign in</h1>
<p className="text-sm text-base-content/70">Use your work email to continue.</p>
</div>
<a
className={`${buttonClass()} w-full`}
href="#"
style={{ '--plf-button-bg': '#fff', '--plf-button-color': '#1f1f1f', '--plf-button-border': '#747775', '--plf-button-hover-bg': '#f2f2f2' } as CSSProperties}
>
<svg className="btn-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path fill="#ea4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
<path fill="#4285f4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
<path fill="#fbbc05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
<path fill="#34a853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
</svg>
Sign in with Google
</a>
<div className="flex items-center gap-3 text-xs text-base-content/70">
<span className="divider flex-1" />
or continue with email
<span className="divider flex-1" />
</div>
<Alert color="error" role="alert" hidden>
<AlertBody>
<AlertContent>
<AlertDescription>The email or password is incorrect. Check them, or reset your password.</AlertDescription>
</AlertContent>
</AlertBody>
</Alert>
<div className="flex flex-col gap-4">
<Field label="Email">
<InputGroup>
<InputGroupAddon>
<Icon name="mail" />
</InputGroupAddon>
<InputGroupControl name="email" type="email" dir="ltr" autoComplete="email" placeholder="name@example.com" required />
</InputGroup>
</Field>
<div className="field">
<div className="flex items-center justify-between gap-2">
<label className="field-label" htmlFor={passwordId}>Password</label>
<Link variant="muted" className="text-sm" href="#">Forgot password?</Link>
</div>
<InputGroup>
<InputGroupAddon>
<Icon name="key" />
</InputGroupAddon>
<InputGroupControl id={passwordId} name="password" type="password" autoComplete="current-password" required />
<InputGroupPasswordToggle addon />
</InputGroup>
</div>
<Checkbox name="remember">Keep me signed in</Checkbox>
</div>
<div className="flex flex-col gap-3">
<Button color="primary" className="w-full">Sign in</Button>
<div className="flex items-center gap-3 text-xs text-base-content/70">
<span className="divider flex-1" />
or
<span className="divider flex-1" />
</div>
<a className={`${buttonClass({ variant: 'outline' })} w-full`} href="#">Email me a sign-in code</a>
</div>
<p className="text-center text-sm text-base-content/70">New to Pelatform? <Link href="#">Create an account</Link></p>
</form>
</div>
</div>
<div className="hidden items-center justify-center bg-base-200 p-10 lg:flex" data-plf-root data-plf-theme="dark">
<div className="flex w-full max-w-xl flex-col gap-8">
<div className="flex flex-col gap-2">
<p className="text-3xl font-semibold">Know where every invoice stands.</p>
<p className="text-base-content/70">Revenue, customers and invoices for your workspace, in one place.</p>
</div>
<MockupWindow>
<img src="/previews/assets/mockup-dashboard.webp" width={2560} height={1520} alt="" />
</MockupWindow>
</div>
</div>
</div>
);
}import { useId, type CSSProperties } from 'react';
import {
Alert, AlertBody, AlertContent, AlertDescription, Button, buttonClass, Checkbox, Field, Icon, InputGroup,
InputGroupAddon, InputGroupControl, InputGroupPasswordToggle, Link, MockupWindow,
} from '@pelatform/react/prefixed';
export function Example() {
const passwordId = useId();
return (
<div className="plf:grid plf:min-h-dvh plf:bg-base-100 plf:lg:grid-cols-2">
<div className="plf:flex plf:flex-col plf:gap-6 plf:p-6 plf:md:p-10">
<a className="plf:flex plf:items-center plf:gap-2 plf:self-start plf:font-medium" href="#">
<span className="plf:grid plf:size-8 plf:place-items-center plf:rounded-lg plf:bg-primary plf:text-primary-content">
<Icon name="stack-2" className="plf:size-5" />
</span>
Pelatform
</a>
<div className="plf:flex plf:flex-1 plf:items-center plf:justify-center">
<form className="plf:flex plf:w-full plf:max-w-sm plf:flex-col plf:gap-6" method="post">
<div className="plf:flex plf:flex-col plf:gap-1">
<h1 className="plf:text-2xl plf:font-semibold">Sign in</h1>
<p className="plf:text-sm plf:text-base-content/70">Use your work email to continue.</p>
</div>
<a
className={`${buttonClass()} plf:w-full`}
href="#"
style={{ '--plf-button-bg': '#fff', '--plf-button-color': '#1f1f1f', '--plf-button-border': '#747775', '--plf-button-hover-bg': '#f2f2f2' } as CSSProperties}
>
<svg className="plf:btn-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path fill="#ea4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
<path fill="#4285f4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
<path fill="#fbbc05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
<path fill="#34a853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
</svg>
Sign in with Google
</a>
<div className="plf:flex plf:items-center plf:gap-3 plf:text-xs plf:text-base-content/70">
<span className="plf:divider plf:flex-1" />
or continue with email
<span className="plf:divider plf:flex-1" />
</div>
<Alert color="error" role="alert" hidden>
<AlertBody>
<AlertContent>
<AlertDescription>The email or password is incorrect. Check them, or reset your password.</AlertDescription>
</AlertContent>
</AlertBody>
</Alert>
<div className="plf:flex plf:flex-col plf:gap-4">
<Field label="Email">
<InputGroup>
<InputGroupAddon>
<Icon name="mail" />
</InputGroupAddon>
<InputGroupControl name="email" type="email" dir="ltr" autoComplete="email" placeholder="name@example.com" required />
</InputGroup>
</Field>
<div className="plf:field">
<div className="plf:flex plf:items-center plf:justify-between plf:gap-2">
<label className="plf:field-label" htmlFor={passwordId}>Password</label>
<Link variant="muted" className="plf:text-sm" href="#">Forgot password?</Link>
</div>
<InputGroup>
<InputGroupAddon>
<Icon name="key" />
</InputGroupAddon>
<InputGroupControl id={passwordId} name="password" type="password" autoComplete="current-password" required />
<InputGroupPasswordToggle addon />
</InputGroup>
</div>
<Checkbox name="remember">Keep me signed in</Checkbox>
</div>
<div className="plf:flex plf:flex-col plf:gap-3">
<Button color="primary" className="plf:w-full">Sign in</Button>
<div className="plf:flex plf:items-center plf:gap-3 plf:text-xs plf:text-base-content/70">
<span className="plf:divider plf:flex-1" />
or
<span className="plf:divider plf:flex-1" />
</div>
<a className={`${buttonClass({ variant: 'outline' })} plf:w-full`} href="#">Email me a sign-in code</a>
</div>
<p className="plf:text-center plf:text-sm plf:text-base-content/70">New to Pelatform? <Link href="#">Create an account</Link></p>
</form>
</div>
</div>
<div className="plf:hidden plf:items-center plf:justify-center plf:bg-base-200 plf:p-10 plf:lg:flex" data-plf-root data-plf-theme="dark">
<div className="plf:flex plf:w-full plf:max-w-xl plf:flex-col plf:gap-8">
<div className="plf:flex plf:flex-col plf:gap-2">
<p className="plf:text-3xl plf:font-semibold">Know where every invoice stands.</p>
<p className="plf:text-base-content/70">Revenue, customers and invoices for your workspace, in one place.</p>
</div>
<MockupWindow>
<img src="/previews/assets/mockup-dashboard.webp" width={2560} height={1520} alt="" />
</MockupWindow>
</div>
</div>
</div>
);
}The product panel is a root of its own in the dark theme, so it stays dark in both themes; below lg it hides. For a centered card, as on Forgot password, drop the panel and center the form.
<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="pelatform-ui.min.js" defer></script><link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/button.min.css">
<link rel="stylesheet" href="components/form.min.css">
<link rel="stylesheet" href="components/alert.min.css">
<link rel="stylesheet" href="components/separator.min.css">
<link rel="stylesheet" href="components/link.min.css">
<link rel="stylesheet" href="components/mockup.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/input-group.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script><link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script><link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/button.prefixed.min.css">
<link rel="stylesheet" href="components/form.prefixed.min.css">
<link rel="stylesheet" href="components/alert.prefixed.min.css">
<link rel="stylesheet" href="components/separator.prefixed.min.css">
<link rel="stylesheet" href="components/link.prefixed.min.css">
<link rel="stylesheet" href="components/mockup.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/input-group.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>