Light column sign-up

Sign-up page with a light column shader panel.

Usage

import { StreakSignUp } from '@/components/blocks/sign-in-03'


<StreakSignUp />


// Wire it to your auth
<StreakSignUp
  brand="Slatebrook"
  headline={['Turn loose notes', 'into shipped work.']}
  loginHref="/log-in"
  onSubmit={async ({ email, password }) => {
    await signUp(email, password)
  }}
  colors={{ primary: '#2B7FFF', highlight: '#8EC5FF' }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/sign-in-03

npx shadcn@latest add @pastaui-pro/sign-in-03

yarn dlx shadcn@latest add @pastaui-pro/sign-in-03

bunx --bun shadcn@latest add @pastaui-pro/sign-in-03

Source

Props

Light column sign-up props
Prop	Type	Default	Description
brand / brandHref	string	= 'Slatebrook' / '/'	Accessible name and link for the logo mark.
logo	ReactNode	= Blue column mark	Replaces the default logo mark.
headline	string[]	= ['Turn loose notes', 'into shipped work.']	One entry per line of the panel headline. Lines flow together on phones.
title / subtitle	string	= 'Create your account' / Welcome line	Heading and supporting text above the form.
labels	Partial<StreakSignUpLabels>	= —	Field labels, placeholders, button text, the log in prompt, and the success and error copy. Use {email} in successBody to insert the address.
minLength	number	= 8	Minimum password length, used by validation and the strength meter.
loginHref	string	= '#log-in'	Link for the log in action.
onSubmit	(values: { email: string; password: string }) => void \| Promise<void>	= —	Called with valid values. The button shows a loading state until it settles; throw or reject to show the error state with the fields kept. Without it, success is simulated after a short delay.
colors	Partial<{ base; deep; primary; highlight; core }>	= Blue on near-black	Hex colours for the light column shader, from the base up to the glow.
speed	number	= 1	Multiplier for how fast the columns breathe. 0 freezes them.
className / style	string / CSSProperties	= —	Classes for the section, and inline overrides for the --pp-* variables.