Multi-Column Footer

blockmarketing

Site footer with brand mark + newsletter form on the left and four link columns (Product / Company / Resources / Legal) on the right. Separator divides into a copyright + social icon row. Each link is spelled out inline so copy lives in one place.

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/lit/footer-01.json

$npx shadcn@latest add https://uipkge.dev/r/lit/footer-01.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/lit/footer-01.json

$bunx shadcn@latest add https://uipkge.dev/r/lit/footer-01.json

Manifest:https://uipkge.dev/r/lit/footer-01.jsonInstalls to:src/uip/blocks/footer-01/

Variants

Loading interactive previews…

Schema

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

HTMLElementTagNameMap

interface HTMLElementTagNameMap {
    'uip-footer-01': UipFooter01
  }
}

npm dependencies

lit lucide

Includes

button input lit-core separator

Files installed (1)

src/uip/blocks/footer-01/footer-01.ts9.6 kB

import { LitElement, css, html, nothing } from 'lit'
import { Boxes } from 'lucide'
import { tailwind } from '../../lib/styles'
import { ThemeController } from '../../lib/theme'
import { icon } from '../../lib/icon'
// Side-effect imports: register the composed elements for standalone use
// (consumers who install only this block still get working primitives).
import '../../components/button/button'
import '../../components/input/input'
import type { UipInput } from '../../components/input/input'
import '../../components/separator/separator'

const Github = (className: string) => html`<svg
  class=${className}
  viewBox="0 0 24 24"
  fill="currentColor"
  aria-hidden="true"
>
  <path
    d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"
  />
</svg>`

const Twitter = (className: string) => html`<svg
  class=${className}
  viewBox="0 0 24 24"
  fill="currentColor"
  aria-hidden="true"
>
  <path
    d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z"
  />
</svg>`

const Linkedin = (className: string) => html`<svg
  class=${className}
  viewBox="0 0 24 24"
  fill="currentColor"
  aria-hidden="true"
>
  <path
    d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"
  />
</svg>`

/**
 * <uip-footer-01> — the registry Footer01 block as a web component.
 *
 * Class strings are React's Footer01 verbatim. React state (useState) becomes
 * @state fields. React has no submit callback; the form dispatches a
 * `subscribe` CustomEvent (detail: { email }, bubbles, composed) so consumers
 * can wire it to a mailing-list provider after install.
 */
export class UipFooter01 extends LitElement {
  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
  // :host display can't be a utility class (the host has no template of its own).
  static styles = [tailwind, css`:host { display: block; }`]

  static properties = {
    newsletter: { state: true },
    subscribed: { state: true },
  }

  private newsletter = ''
  private subscribed = false

  constructor() {
    super()
    new ThemeController(this)
  }

  connectedCallback() {
    super.connectedCallback()
    this.setAttribute('data-uipkge', '')
    this.setAttribute('data-slot', 'footer-01')
  }

  private subscribe(e: Event) {
    e.preventDefault()
    if (!this.newsletter) return
    const email = this.newsletter
    this.subscribed = true
    this.newsletter = ''
    this.dispatchEvent(new CustomEvent('subscribe', { detail: { email }, bubbles: true, composed: true }))
  }

  render() {
    return html`
      <footer data-slot="footer-01" class="bg-background border-t">
        <div class="mx-auto max-w-6xl px-6 py-16">
          <div class="grid gap-10 lg:grid-cols-12">
            <div class="space-y-4 lg:col-span-4">
              <div class="flex items-center gap-2">
                <div class="bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md">
                  ${icon(Boxes, 'boxes', 'size-4')}
                </div>
                <span class="text-base font-semibold">Acme</span>
              </div>
              <p class="text-muted-foreground max-w-sm text-sm">Built on shadcn-vue. Get product updates monthly.</p>
              <form class="flex max-w-sm gap-2" @submit=${this.subscribe}>
                <uip-input
                  class="flex-1"
                  .value=${this.newsletter}
                  type="email"
                  placeholder="you@company.com"
                  required
                  @input=${(e: Event) => {
                    this.newsletter = (e.target as UipInput).value
                  }}
                ></uip-input>
                <uip-button type="submit">Subscribe</uip-button>
              </form>
              ${this.subscribed
                ? html`<p class="text-success text-xs">Thanks — check your inbox to confirm.</p>`
                : nothing}
            </div>

            <div class="grid grid-cols-2 gap-6 sm:grid-cols-4 lg:col-span-8">
              <div class="space-y-3">
                <h3 class="text-sm font-semibold">Product</h3>
                <ul class="space-y-2">
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Features
                    </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Pricing
                    </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Changelog
                    </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Roadmap
                    </a>
                  </li>
                </ul>
              </div>
              <div class="space-y-3">
                <h3 class="text-sm font-semibold">Company</h3>
                <ul class="space-y-2">
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors"> About </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors"> Blog </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Careers
                    </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Contact
                    </a>
                  </li>
                </ul>
              </div>
              <div class="space-y-3">
                <h3 class="text-sm font-semibold">Resources</h3>
                <ul class="space-y-2">
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Documentation
                    </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors"> API </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Help center
                    </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Status
                    </a>
                  </li>
                </ul>
              </div>
              <div class="space-y-3">
                <h3 class="text-sm font-semibold">Legal</h3>
                <ul class="space-y-2">
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Terms
                    </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Privacy
                    </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                      Security
                    </a>
                  </li>
                  <li>
                    <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors"> DPA </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <uip-separator class="[&::part(base)]:my-10"></uip-separator>

          <div class="flex flex-wrap items-center justify-between gap-4">
            <p class="text-muted-foreground text-xs">© 2026 Acme. All rights reserved.</p>
            <div class="flex items-center gap-3">
              <a href="#" aria-label="GitHub" class="text-muted-foreground hover:text-foreground transition-colors">
                ${Github('size-4')}
              </a>
              <a href="#" aria-label="Twitter" class="text-muted-foreground hover:text-foreground transition-colors">
                ${Twitter('size-4')}
              </a>
              <a href="#" aria-label="LinkedIn" class="text-muted-foreground hover:text-foreground transition-colors">
                ${Linkedin('size-4')}
              </a>
            </div>
          </div>
        </div>
      </footer>
    `
  }
}

customElements.get('uip-footer-01') || customElements.define('uip-footer-01', UipFooter01)

declare global {
  interface HTMLElementTagNameMap {
    'uip-footer-01': UipFooter01
  }
}

Raw manifest:https://uipkge.dev/r/lit/footer-01.json

Change language