Newsletter

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

Documentation for the Newsletter component.

Installation

bash

deno run -A jsr:@lockness/ui add newsletter

Usage

tsx

import { Newsletter } from '@lockness/ui/components'

<Newsletter
    action='/subscribe'
    placeholder='Enter your email'
    buttonText='Subscribe'
    showIcon
/>

Props

Prop	Type	Default	Description
variant	`'inline' \| 'stacked' \| 'card' \| 'minimal'`	`'inline'`	Layout variant
action	`string`	`'#'`	Form action URL
method	`'get' \| 'post'`	`'post'`	Form method
placeholder	`string`	`'Enter your email'`	Input placeholder text
buttonText	`string`	`'Subscribe'`	Submit button text
title	`string`	-	Title text (for stacked/card variants)
description	`string`	-	Description text
showIcon	`boolean`	`false`	Show email icon in input
class	`string`	-	Additional CSS class names
inputName	`string`	`'email'`	Input name attribute
up-target	`string`	-	Unpoly target for form submission

Theming

The Newsletter component can be customized using CSS variables. This allows you to change the appearance of newsletter forms globally or override specific instances.

Available CSS Variables

Variable	Default	Description
`--newsletter-padding`	`2rem`	Inner padding for card/stacked variants
`--newsletter-gap`	`1rem`	Gap between form elements
`--newsletter-input-height`	`2.5rem`	Height of the email input
`--newsletter-border-radius`	`var(--radius)`	Border radius for input and button

Theming Examples

Global Customization

Customize all newsletter forms by setting CSS variables in your theme:

css

/* app/view/assets/app.css */
@theme {
    /* More spacious newsletter forms */
    --newsletter-padding: 2.5rem;
    --newsletter-gap: 1.5rem;

    /* Larger input height */
    --newsletter-input-height: 3rem;

    /* More rounded corners */
    --newsletter-border-radius: 0.75rem;
}

Local Overrides

Override CSS variables for specific newsletter instances:

tsx

<div style="--newsletter-padding: 1.5rem; --newsletter-gap: 0.75rem;">
    <Newsletter variant="card" title="Subscribe" />
    {/* Compact newsletter form */}
</div>

<div style="--newsletter-input-height: 3.5rem; --newsletter-border-radius: 2rem;">
    <Newsletter variant="inline" />
    {/* Large newsletter with rounded pill-style input */}
</div>

Component-Specific Theming

Create themed sections with different newsletter styles:

tsx

<div class="footer-newsletter" style={{
    '--newsletter-padding': '3rem',
    '--newsletter-gap': '1.5rem',
    '--newsletter-input-height': '3rem',
    '--newsletter-border-radius': '0.5rem'
}}>
    <Newsletter
        variant="stacked"
        title="Stay Updated"
        description="Get the latest news delivered to your inbox"
    />
</div>

<div class="inline-newsletter" style={{
    '--newsletter-gap': '0.5rem',
    '--newsletter-input-height': '2.25rem',
    '--newsletter-border-radius': '0.25rem'
}}>
    <Newsletter
        variant="inline"
        placeholder="Your email"
        buttonText="Sign up"
    />
</div>

INLINE (DEFAULT)

tsx

import { Newsletter } from '@lockness/ui/components'

<Newsletter action="/subscribe" />

WITH ICON

tsx

<Newsletter action="/subscribe" showIcon />

STACKED VARIANT

tsx

<Newsletter
  variant="stacked"
  title="Stay updated"
  description="Get the latest news and updates delivered directly to your inbox."
  action="/subscribe"
/>

CARD VARIANT

tsx

<Newsletter
  variant="card"
  title="Subscribe to our newsletter"
  description="Join 10,000+ developers who receive our weekly updates."
  action="/subscribe"
  showIcon
/>

MINIMAL VARIANT

tsx

<Newsletter variant="minimal" action="/subscribe" />

CUSTOM TEXT

tsx

<Newsletter
  placeholder="you@company.com"
  buttonText="Join Waitlist"
  showIcon
/>

<Newsletter
  placeholder="Your best email"
  buttonText="Get Started →"
/>

SECTION - DEFAULT

Subscribe to our newsletter

Get weekly tips, tutorials, and resources delivered to your inbox.

tsx

import { NewsletterSection } from '@lockness/ui/components'

<NewsletterSection
  title="Subscribe to our newsletter"
  description="Get weekly tips, tutorials, and resources delivered to your inbox."
/>

SECTION - MUTED BACKGROUND

Stay in the loop

No spam, unsubscribe at any time.

✨ Join 5,000+ subscribers

tsx

<NewsletterSection
  background="muted"
  title="Stay in the loop"
  description="No spam, unsubscribe at any time."
  socialProof="✨ Join 5,000+ subscribers"
/>

SECTION - PRIMARY BACKGROUND

Get early access

Be the first to know when we launch new features.

tsx

<NewsletterSection
  background="primary"
  title="Get early access"
  description="Be the first to know when we launch new features."
  buttonText="Notify Me"
/>

SECTION - GRADIENT BACKGROUND

Join the community

Weekly insights, exclusive content, and early access to new features.

🚀 Trusted by 10,000+ developers

tsx

<NewsletterSection
  background="gradient"
  title="Join the community"
  description="Weekly insights, exclusive content, and early access to new features."
  buttonText="Subscribe Free"
  socialProof="🚀 Trusted by 10,000+ developers"
/>

WITH UNPOLY

tsx

<Newsletter
  action="/api/subscribe"
  up-target="#newsletter-result"
  showIcon
/>
<div id="newsletter-result" />

Edit this page