Newsletter

blockmarketing

Newsletter growth quartet: a slim inline signup band, a filterable issue archive with featured spotlight, centered and split signup forms, and a split section pairing the pitch with a preview of the last issue.

Also available for Vue ->

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/newsletter.json

$npx shadcn@latest add https://uipkge.dev/r/react/newsletter.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/newsletter.json

$bunx shadcn@latest add https://uipkge.dev/r/react/newsletter.json

Named registry:npx shadcn@latest add @uipkge-react/newsletterInstalls to:components/blocks/newsletter/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

NewsletterIssue

interface NewsletterIssue {
  id: string
  issueNumber: number
  volumeDate: string
  title: string
  excerpt: string
  category: 'Architecture' | 'Design Tokens' | 'Performance' | 'Interviews'
  tags: string[]
  readTime: string
  date: string
  commentsCount: number
  likesCount: number
  featured?: boolean
}

ChannelOption

interface ChannelOption {
  id: string
  title: string
  frequency: string
  description: string
  badge: string
}

npm dependencies

lucide-react

Includes

badge button card input separator

Files installed (4)

components/blocks/newsletter/NewsletterInlineBand.tsx2.5 kB

'use client'

import { useState, type FormEvent } from 'react'
import { Check, Mail } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

export function NewsletterInlineBand() {
  const [email, setEmail] = useState('')
  const [submitted, setSubmitted] = useState(false)

  function subscribe(event: FormEvent) {
    event.preventDefault()
    if (!email.trim()) return
    setSubmitted(true)
  }

  return (
    <section data-slot="newsletter-inline-band" className="border-border bg-muted/40 border-y">
      <div className="mx-auto flex max-w-6xl flex-col gap-6 px-6 py-10 lg:flex-row lg:items-center lg:gap-12">
        <div className="min-w-0 lg:flex-1">
          <div className="flex items-center gap-2">
            <Mail className="text-muted-foreground size-4" aria-hidden="true" />
            <Badge variant="secondary">Monthly</Badge>
          </div>
          <p className="mt-2.5 text-lg leading-snug font-medium text-balance">
            Engineering notes on metric modelling, access control, and warehouse cost.
          </p>
          <p className="text-muted-foreground mt-1.5 text-sm">
            Read by 8,400 data and finance engineers. One email a month, no product announcements.
          </p>
        </div>

        <form className="lg:w-[26rem] lg:shrink-0" onSubmit={subscribe}>
          <div className="flex gap-2">
            <Input
              value={email}
              onChange={(event) => setEmail(event.target.value)}
              type="email"
              required
              placeholder="[email protected]"
              autoComplete="email"
              aria-label="Email address"
            />
            <Button type="submit" className="shrink-0">
              Subscribe
            </Button>
          </div>
          {/* Status row is reserved from first paint, so confirming does not
              nudge the band's height and shift the page under the cursor. */}
          <p className="mt-2 min-h-5 text-xs" aria-live="polite">
            {submitted ? (
              <span className="text-success inline-flex items-center gap-1.5">
                <Check className="size-3" aria-hidden="true" />
                Check your inbox to confirm.
              </span>
            ) : (
              <span className="text-muted-foreground">Unsubscribe in one click. We never share the list.</span>
            )}
          </p>
        </form>
      </div>
    </section>
  )
}