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.

Installation

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

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

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

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

Manifest:https://uipkge.dev/r/svelte/newsletter.jsonInstalls to:src/lib/components/blocks/newsletter/

Variants

Loading interactive previews…

npm dependencies

@lucide/svelte

Includes

badge button card input separator

Files installed (4)

src/lib/components/blocks/newsletter/NewsletterInlineBand.svelte2.1 kB

<script lang="ts">
  import { Check, Mail } from '@lucide/svelte'
  import { Badge } from '$lib/components/ui/badge'
  import { Button } from '$lib/components/ui/button'
  import { Input } from '$lib/components/ui/input'

  let email = $state('')
  let submitted = $state(false)

  function subscribe() {
    if (!email.trim()) return
    submitted = true
  }
</script>

<section data-slot="newsletter-inline-band" class="border-border bg-muted/40 border-y">
  <div class="mx-auto flex max-w-6xl flex-col gap-6 px-6 py-10 lg:flex-row lg:items-center lg:gap-12">
    <div class="min-w-0 lg:flex-1">
      <div class="flex items-center gap-2">
        <Mail class="text-muted-foreground size-4" aria-hidden="true" />
        <Badge variant="secondary">Monthly</Badge>
      </div>
      <p class="mt-2.5 text-lg leading-snug font-medium text-balance">
        Engineering notes on metric modelling, access control, and warehouse cost.
      </p>
      <p class="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
      class="lg:w-[26rem] lg:shrink-0"
      onsubmit={(e) => {
        e.preventDefault()
        subscribe()
      }}
    >
      <div class="flex gap-2">
        <Input
          bind:value={email}
          type="email"
          required
          placeholder="you@company.com"
          autocomplete="email"
          aria-label="Email address"
        />
        <Button type="submit" class="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 class="mt-2 min-h-5 text-xs" aria-live="polite">
        {#if submitted}
          <span class="text-success inline-flex items-center gap-1.5">
            <Check class="size-3" aria-hidden="true" />
            Check your inbox to confirm.
          </span>
        {:else}
          <span class="text-muted-foreground">Unsubscribe in one click. We never share the list.</span>
        {/if}
      </p>
    </form>
  </div>
</section>

src/lib/components/blocks/newsletter/NewsletterIssueArchive.svelte20.4 kB

src/lib/components/blocks/newsletter/NewsletterSignup.svelte11.1 kB

src/lib/components/blocks/newsletter/NewsletterSplitPreview.svelte3.3 kB

Raw manifest:https://uipkge.dev/r/svelte/newsletter.json

Change language