Subscribe
Installation
Run the following command
npx vibes@latest add subscribeUsage
function Usage() { return ( <Subscribe action={action} description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor." image={image} title="Sign up for our newsletter" /> );} const image = { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTpiZTZmZGU0OC1jYWEzLTRmNzUtYTFhNy03NzNlNThiMTJlZWE=/lady-with-plant.jpeg', alt: 'Lady with plant',};async function action( _lastResult: { lastResult: SubmissionResult | null }, formData: FormData,) { 'use server'; const submission = parseWithZod(formData, { schema }); if (submission.status !== 'success') { return { lastResult: submission.reply({ formErrors: ['Boom!'] }) }; } // Simulate subscribing a user await new Promise((resolve) => setTimeout(resolve, 1000)); return { lastResult: submission.reply(), successMessage: 'Subscribed!' };}API Reference
SubscribeProps
| Prop | Type | Default |
|---|---|---|
action* | SubscribeAction | |
image | Image | |
title* | string | |
description | string | |
placeholder | string |
ForgotPasswordAction
type Action<State, Payload> = (state: Awaited<State>, payload: Payload) => State | Promise<State>;type SubscribeAction = Action< { lastResult: SubmissionResult | null; successMessage?: string }, FormData>;This component uses Confom to handle form submissions. Refer to the Conform docs for more details.
Here's an example of an action function that does validation and simulates subscribe a user:
async function action(_lastResult: { lastResult: SubmissionResult | null }, formData: FormData) { 'use server'; const submission = parseWithZod(formData, { schema }); if (submission.status !== 'success') { return { lastResult: submission.reply({ formErrors: ['Boom!'] }) }; } // Simulate subscribing a user await new Promise((resolve) => setTimeout(resolve, 1000)); return { lastResult: submission.reply(), successMessage: 'Subscribed!' };}Image
| Prop | Type | Default |
|---|---|---|
src* | string | |
alt* | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --subscribe-font-family: var(--font-family-body); --subscribe-title-font-family: var(--font-family-heading); --subscribe-background: var(--primary-shadow); --subscribe-title: var(--primary-highlight); --subscribe-description: var(--primary-highlight);}