Authentication
Sign up
A page that creates an account and its workspace, beside a glimpse of the product.
<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">Create your account</h1>
<p class="text-sm text-base-content/70">Use your work email to set up a workspace.</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 up 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="flex flex-col gap-4">
<div class="field">
<label class="field-label" for="sign-up-name">Full name</label>
<div class="input-group">
<span class="input-group-addon">
<span class="icon icon-user"></span>
</span>
<input class="input-group-control" id="sign-up-name" name="name" type="text" autocomplete="name" required>
</div>
</div>
<div class="field">
<label class="field-label" for="sign-up-email">Work 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-up-email" name="email" type="email" dir="ltr" autocomplete="email" placeholder="name@example.com" required>
</div>
</div>
<div class="field">
<label class="field-label" for="sign-up-workspace">Workspace name</label>
<div class="input-group">
<span class="input-group-addon">
<span class="icon icon-building"></span>
</span>
<input class="input-group-control" id="sign-up-workspace" name="workspace" type="text" autocomplete="organization" required aria-describedby="sign-up-workspace-help">
</div>
<p class="field-help" id="sign-up-workspace-help">Your team sees this name. You can change it later.</p>
</div>
<div class="field">
<label class="field-label" for="sign-up-password">Password</label>
<div class="input-group">
<span class="input-group-addon">
<span class="icon icon-key"></span>
</span>
<input class="input-group-control" id="sign-up-password" name="password" type="password" autocomplete="new-password" required minlength="12" aria-describedby="sign-up-password-help">
<button class="input-group-action input-group-addon" type="button" data-plf-password-toggle hidden></button>
</div>
<p class="field-help" id="sign-up-password-help">At least 12 characters.</p>
</div>
<div class="choice">
<input class="checkbox" id="sign-up-terms" name="terms" type="checkbox" required>
<label class="choice-label" for="sign-up-terms">
<span>
I agree to the <a class="link" href="#">Terms</a>
and the <a class="link" href="#">Privacy Policy</a>
</span>
</label>
</div>
</div>
<button class="btn btn-primary w-full">Create account</button>
<p class="text-center text-sm text-base-content/70">Already have an account? <a class="link" href="#">Sign in</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">Create your account</h1>
<p class="plf:text-sm plf:text-base-content/70">Use your work email to set up a workspace.</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 up 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:flex plf:flex-col plf:gap-4">
<div class="plf:field">
<label class="plf:field-label" for="sign-up-name">Full name</label>
<div class="plf:input-group">
<span class="plf:input-group-addon">
<span class="plf:icon plf:icon-user"></span>
</span>
<input class="plf:input-group-control" id="sign-up-name" name="name" type="text" autocomplete="name" required>
</div>
</div>
<div class="plf:field">
<label class="plf:field-label" for="sign-up-email">Work 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-up-email" name="email" type="email" dir="ltr" autocomplete="email" placeholder="name@example.com" required>
</div>
</div>
<div class="plf:field">
<label class="plf:field-label" for="sign-up-workspace">Workspace name</label>
<div class="plf:input-group">
<span class="plf:input-group-addon">
<span class="plf:icon plf:icon-building"></span>
</span>
<input class="plf:input-group-control" id="sign-up-workspace" name="workspace" type="text" autocomplete="organization" required aria-describedby="sign-up-workspace-help">
</div>
<p class="plf:field-help" id="sign-up-workspace-help">Your team sees this name. You can change it later.</p>
</div>
<div class="plf:field">
<label class="plf:field-label" for="sign-up-password">Password</label>
<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-up-password" name="password" type="password" autocomplete="new-password" required minlength="12" aria-describedby="sign-up-password-help">
<button class="plf:input-group-action plf:input-group-addon" type="button" data-plf-password-toggle hidden></button>
</div>
<p class="plf:field-help" id="sign-up-password-help">At least 12 characters.</p>
</div>
<div class="plf:choice">
<input class="plf:checkbox" id="sign-up-terms" name="terms" type="checkbox" required>
<label class="plf:choice-label" for="sign-up-terms">
<span>
I agree to the <a class="plf:link" href="#">Terms</a>
and the <a class="plf:link" href="#">Privacy Policy</a>
</span>
</label>
</div>
</div>
<button class="plf:btn plf:btn-primary plf:w-full">Create account</button>
<p class="plf:text-center plf:text-sm plf:text-base-content/70">Already have an account? <a class="plf:link" href="#">Sign in</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 type { CSSProperties } from 'react';
import {
Button, buttonClass, Checkbox, Field, Icon, InputGroup, InputGroupAddon, InputGroupControl, InputGroupPasswordToggle,
Link, MockupWindow,
} from '@pelatform/react';
export function Example() {
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">Create your account</h1>
<p className="text-sm text-base-content/70">Use your work email to set up a workspace.</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 up 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>
<div className="flex flex-col gap-4">
<Field label="Full name">
<InputGroup>
<InputGroupAddon>
<Icon name="user" />
</InputGroupAddon>
<InputGroupControl name="name" type="text" autoComplete="name" required />
</InputGroup>
</Field>
<Field label="Work email">
<InputGroup>
<InputGroupAddon>
<Icon name="mail" />
</InputGroupAddon>
<InputGroupControl name="email" type="email" dir="ltr" autoComplete="email" placeholder="name@example.com" required />
</InputGroup>
</Field>
<Field label="Workspace name" help="Your team sees this name. You can change it later.">
<InputGroup>
<InputGroupAddon>
<Icon name="building" />
</InputGroupAddon>
<InputGroupControl name="workspace" type="text" autoComplete="organization" required />
</InputGroup>
</Field>
<Field label="Password" help="At least 12 characters.">
<InputGroup>
<InputGroupAddon>
<Icon name="key" />
</InputGroupAddon>
<InputGroupControl name="password" type="password" autoComplete="new-password" required minLength={12} />
<InputGroupPasswordToggle addon />
</InputGroup>
</Field>
<Checkbox name="terms" required>
<span>
I agree to the <Link href="#">Terms</Link> and the <Link href="#">Privacy Policy</Link>
</span>
</Checkbox>
</div>
<Button color="primary" className="w-full">Create account</Button>
<p className="text-center text-sm text-base-content/70">Already have an account? <Link href="#">Sign in</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 type { CSSProperties } from 'react';
import {
Button, buttonClass, Checkbox, Field, Icon, InputGroup, InputGroupAddon, InputGroupControl, InputGroupPasswordToggle,
Link, MockupWindow,
} from '@pelatform/react/prefixed';
export function Example() {
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">Create your account</h1>
<p className="plf:text-sm plf:text-base-content/70">Use your work email to set up a workspace.</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 up 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>
<div className="plf:flex plf:flex-col plf:gap-4">
<Field label="Full name">
<InputGroup>
<InputGroupAddon>
<Icon name="user" />
</InputGroupAddon>
<InputGroupControl name="name" type="text" autoComplete="name" required />
</InputGroup>
</Field>
<Field label="Work email">
<InputGroup>
<InputGroupAddon>
<Icon name="mail" />
</InputGroupAddon>
<InputGroupControl name="email" type="email" dir="ltr" autoComplete="email" placeholder="name@example.com" required />
</InputGroup>
</Field>
<Field label="Workspace name" help="Your team sees this name. You can change it later.">
<InputGroup>
<InputGroupAddon>
<Icon name="building" />
</InputGroupAddon>
<InputGroupControl name="workspace" type="text" autoComplete="organization" required />
</InputGroup>
</Field>
<Field label="Password" help="At least 12 characters.">
<InputGroup>
<InputGroupAddon>
<Icon name="key" />
</InputGroupAddon>
<InputGroupControl name="password" type="password" autoComplete="new-password" required minLength={12} />
<InputGroupPasswordToggle addon />
</InputGroup>
</Field>
<Checkbox name="terms" required>
<span>
I agree to the <Link href="#">Terms</Link> and the <Link href="#">Privacy Policy</Link>
</span>
</Checkbox>
</div>
<Button color="primary" className="plf:w-full">Create account</Button>
<p className="plf:text-center plf:text-sm plf:text-base-content/70">Already have an account? <Link href="#">Sign in</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/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/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>