Fluted wave split

Split waitlist with a fluted glass shader card.

Usage

import { WaitlistFluted } from '@/components/blocks/waitlist-01'


<WaitlistFluted />


// Send the email to your own endpoint
<WaitlistFluted
  onSubmit={async (email) => {
    const response = await fetch('/api/waitlist', {
      method: 'POST',
      body: JSON.stringify({ email }),
    })
    if (!response.ok) throw new Error('We couldn’t save your spot. Try again.')
  }}
/>


// Your own brand, copy and wave colours
<WaitlistFluted
  brand="Moonrise"
  headline={['Be first through\nthe ', 'door']}
  colors={{ sky: '#7C5CFF', blue: '#3B2BD9', mist: '#C9BEFF' }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/waitlist-01

npx shadcn@latest add @pastaui-pro/waitlist-01

yarn dlx shadcn@latest add @pastaui-pro/waitlist-01

bunx --bun shadcn@latest add @pastaui-pro/waitlist-01

Source

Props

Fluted wave split props
Prop	Type	Default	Description
brand	ReactNode	= 'Longboard'	A name shown next to the default wave mark, or your own logo node. It sits on the light top of the card, so it uses dark ink.
status	string \| null	= 'Now in public beta'	Pill above the headline with a glowing dot. Pass null to hide it.
headline	[before: string, accent: string, after?: string]	= ['Ride in on the\nfirst ', 'wave']	Headline parts. The accent is set in italic with a light-blue tint. Use \n for a line break.
description	string	= A short line about launch emails	Muted text under the headline.
heading / subtitle	string	= 'Get early access' / 'Early members skip the queue…'	Form heading and the muted line under it.
emailLabel / placeholder	string	= 'Email address' / 'you@company.com'	Visually hidden label and placeholder for the email field.
buttonLabel / loadingLabel	string	= 'Save my spot' / 'Saving your spot…'	Button text, and the text shown with the spinner while submitting.
successTitle / successMessage	string	= 'You’re on the list' / 'We’ll write to {email}…'	Shown after a successful submit. {email} is replaced with the address.
note	string	= 'One email at launch. Unsubscribe any time.'	Small print under the form.
onSubmit	(email: string) => void \| Promise<void>	= Simulated success	Called with the trimmed, validated email. Throw or reject to show the error message. Without it, the form simulates a successful submit after a short delay.
colors	Partial<{ navy, blue, sky, mist, light }>	= { navy: '#040F1E', blue: '#1D5FD6', sky: '#4C9BFF', mist: '#A9CBF2', light: '#F1F2F1' }	Hex colours for the fluted wave, from the light top down to the navy base.
speed	number	= 1	Multiplier for how fast the wave undulates. 0 freezes it.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color and type variables.