Underline waitlist card

Square-cornered waitlist card with underline fields.

Usage

import { WaitlistUnderline } from '@/components/blocks/waitlist-03'


<WaitlistUnderline />


// Send the signup to your own endpoint
<WaitlistUnderline
  title="Join the Acme waitlist"
  termsHref="/terms"
  privacyHref="/privacy"
  onSubmit={async (values) => {
    const response = await fetch('/api/waitlist', {
      method: 'POST',
      body: JSON.stringify(values),
    })
    if (!response.ok) throw new Error('We couldn’t add you to the waitlist. Try again.')
  }}
/>


// Your own fields and options
<WaitlistUnderline
  fields={[
    { kind: 'input', name: 'email', label: 'Email', type: 'email', autoComplete: 'email', required: true },
    { kind: 'input', name: 'company', label: 'Company name', autoComplete: 'organization' },
    {
      kind: 'select',
      name: 'useCase',
      label: 'What would you use it for?',
      required: true,
      options: [
        { value: 'personal', label: 'Personal projects' },
        { value: 'team', label: 'My team at work' },
        { value: 'clients', label: 'Client work' },
      ],
    },
  ]}
/>

Install

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

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

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

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

Source

Props

Underline waitlist card props
Prop	Type	Default	Description
title	string	= 'Join the Lodestar waitlist'	Card heading.
description	string	= Short early access line	Subtitle under the heading.
fields	WaitlistUnderlineField[]	= Email (required), name, role and team size	Fields to render, in order. Inputs take kind: 'input', name, label, and optional type ('email' \| 'tel' \| 'text'), autoComplete and required. Selects take kind: 'select' and options: { value, label }[], and sit two to a row above 440px.
checkboxLabel	ReactNode	= Terms and privacy sentence	Agreement sentence next to the required checkbox.
termsHref / privacyHref	string	= '#terms' / '#privacy'	Links used by the default agreement sentence.
submitLabel	string	= 'Join the waitlist'	Button text.
successTitle / successDescription	string	= 'You’re on the list' / invite line	Copy for the panel shown after a successful submit.
onSubmit	(values: Record<string, string>) => void \| Promise<void>	= —	Called with the values keyed by field name once every field is valid and the checkbox is ticked. Throw to show the error message. Without it, the form simulates success.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* theme variables.