Newsletter
Markdown for agentsEmail capture block with inline or stacked layout, pending state, success and failure feedback.
npx @slipstream-ui/cli@latest add newsletterWeekly insights
Weekly exit insights
One email a week with guides, market data and owner stories.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Headline for the signup block. |
| description | string | — | Supporting copy. |
| placeholder | string | 'you@example.com' | Email placeholder. |
| buttonLabel | string | 'Subscribe' | Submit button label. |
| label | string | 'Email address' | Visible or screen-reader label for the email field. |
| successMessage | string | — | Success message. |
| errorMessage | string | — | Failure message when onSubmit rejects. |
| consent | ReactNode | — | Consent or privacy copy. |
| onSubmit | (email: string) => void | Promise<void> | — | Submit handler; owns the CRM and double opt-in. |
| layout | 'inline' | 'stacked' | 'inline' | Inline on desktop or always stacked. |
| level | 2 | 3 | 2 | Heading level. |
Accessibility
- The email field has an associated label, visible to screen readers.
- Success uses aria-live polite; errors use role alert.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.