Footer

blockmarketing

Site footer collection: multi-column newsletter, oversized brand statement, dense developer grid, mega newsletter, single-row minimal, and dense sitemap variants — each spelled out inline so copy lives in one place.

Installation

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

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

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

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

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

Variants

Loading interactive previews…

npm dependencies

@lucide/svelte

Includes

badge button input select separator

Files installed (7)

src/lib/components/blocks/footer/BrandIcon.svelte1.8 kB

<script lang="ts" module>
  export type BrandIconName = 'github' | 'twitter' | 'linkedin' | 'youtube'

  export interface BrandIconProps {
    name: BrandIconName
    class?: string
  }
</script>

<script lang="ts">
  // @lucide/svelte no longer ships brand glyphs, so the footer social row
  // carries its own stroke-style marks (24x24, currentColor) mirroring the
  // retired lucide brand icons the Vue twin imports.
  let { name, class: className }: BrandIconProps = $props()
</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class={className}
  aria-hidden="true"
>
  {#if name === 'github'}
    <path
      d="M9 19c-5 1.5-5-2.5-7-3m14 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"
    />
  {:else if name === 'twitter'}
    <path
      d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
    />
  {:else if name === 'linkedin'}
    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
    <rect x="2" y="9" width="4" height="12" />
    <circle cx="4" cy="4" r="2" />
  {:else if name === 'youtube'}
    <path
      d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"
    />
    <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
  {/if}
</svg>

src/lib/components/blocks/footer/Footer01.svelte5.3 kB

src/lib/components/blocks/footer/FooterBrandStatement.svelte3 kB

src/lib/components/blocks/footer/FooterDeveloperDenseGrid.svelte5.4 kB

src/lib/components/blocks/footer/FooterMegaNewsletter.svelte4.1 kB

src/lib/components/blocks/footer/FooterMinimalRow.svelte1.6 kB

src/lib/components/blocks/footer/FooterSitemapDense.svelte4 kB

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

Change language