Footer Blocks for Shadcn and Vue
Minimal
<script setup lang="ts">
import type { FunctionalComponent } from 'vue'
import { LinkedinIcon, MailIcon, TwitterIcon, YoutubeIcon } from 'lucide-vue-next'
import { computed } from 'vue'
interface Props {
name?: string
description?: string
sections?: {
title: string
links: {
label: string
href: string
}[]
}[]
socialLinks?: {
name: string
href: string
icon: FunctionalComponent
}[]
}
withDefaults(defineProps<Props>(), {
name: 'Acme Corp',
description:
'Building the future of web applications with modern technologies.',
sections: () => [
{
title: 'Product',
links: [
{ label: 'Pricing', href: '#' },
{ label: 'FAQs', href: '#' },
{ label: 'Changelog', href: '#' },
{ label: 'Roadmap', href: '#' },
],
},
{
title: 'Company',
links: [
{ label: 'About', href: '#' },
{ label: 'Blog', href: '#' },
{ label: 'Careers', href: '#' },
{ label: 'Contact', href: '#' },
],
},
{
title: 'Resources',
links: [
{ label: 'Documentation', href: '#' },
{ label: 'API Reference', href: '#' },
{ label: 'Guides', href: '#' },
{ label: 'Community', href: '#' },
],
},
],
socialLinks: () => [
{
name: 'Mail',
href: '#',
icon: MailIcon,
},
{
name: 'Twitter',
href: '#',
icon: TwitterIcon,
},
{
name: 'LinkedIn',
href: '#',
icon: LinkedinIcon,
},
{
name: 'YouTube',
href: '#',
icon: YoutubeIcon,
},
],
})
const currentYear = computed(() => new Date().getFullYear())
</script>
<template>
<footer class="container mx-auto px-4 py-12 md:px-6">
<div class="grid grid-cols-1 gap-8 md:grid-cols-4 lg:grid-cols-5">
<div class="lg:col-span-2">
<h2 class="mb-4 text-xl font-bold">
{{ name }}
</h2>
<p class="text-sm text-muted-foreground">
{{ description }}
</p>
</div>
<div v-for="section in sections" :key="section.title">
<h3 class="mb-4 text-sm font-semibold">
{{ section.title }}
</h3>
<ul class="space-y-2">
<li v-for="link in section.links" :key="link.label">
<a
:href="link.href"
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
>
{{ link.label }}
</a>
</li>
</ul>
</div>
</div>
<div
class="mt-8 flex flex-col items-center justify-between gap-4 border-t pt-8 md:flex-row"
>
<p class="text-sm text-muted-foreground">
© {{ currentYear }} {{ name }}. All rights reserved.
</p>
<div class="flex gap-4">
<a
v-for="social in socialLinks"
:key="social.name"
:href="social.href"
:aria-label="social.name"
class="text-muted-foreground transition-colors hover:text-foreground"
>
<component :is="social.icon" class="size-5" />
</a>
</div>
</div>
</footer>
</template> Block details
This minimal footer organizes site links into multiple columns with company branding and social media icons. It features a clean grid layout with hover transitions on all links, providing intuitive navigation and company information.
| Dependency | Source |
|---|---|
| Vue | NPM |
| lucide-vue-next | NPM |
With system status
<script setup lang="ts">
import type { FunctionalComponent } from 'vue'
import { LinkedinIcon, MailIcon, TwitterIcon, YoutubeIcon } from 'lucide-vue-next'
import { computed } from 'vue'
interface Props {
name?: string
description?: string
sections?: {
title: string
links: {
label: string
href: string
}[]
}[]
socialLinks?: {
name: string
href: string
icon: FunctionalComponent
}[]
status?: {
text: string
link: string
}
}
withDefaults(defineProps<Props>(), {
name: 'Acme Corp',
description:
'Building the future of web applications with modern technologies.',
sections: () => [
{
title: 'Product',
links: [
{ label: 'Pricing', href: '#' },
{ label: 'FAQs', href: '#' },
{ label: 'Changelog', href: '#' },
{ label: 'Roadmap', href: '#' },
],
},
{
title: 'Company',
links: [
{ label: 'About', href: '#' },
{ label: 'Blog', href: '#' },
{ label: 'Careers', href: '#' },
{ label: 'Contact', href: '#' },
],
},
{
title: 'Resources',
links: [
{ label: 'Documentation', href: '#' },
{ label: 'API Reference', href: '#' },
{ label: 'Guides', href: '#' },
{ label: 'Community', href: '#' },
],
},
],
socialLinks: () => [
{
name: 'Mail',
href: '#',
icon: MailIcon,
},
{
name: 'Twitter',
href: '#',
icon: TwitterIcon,
},
{
name: 'LinkedIn',
href: '#',
icon: LinkedinIcon,
},
{
name: 'YouTube',
href: '#',
icon: YoutubeIcon,
},
],
status: () => ({
text: 'All systems normal',
link: '#',
}),
})
const currentYear = computed(() => new Date().getFullYear())
</script>
<template>
<footer class="container mx-auto px-4 py-12 md:px-6">
<div class="grid grid-cols-1 gap-8 md:grid-cols-4 lg:grid-cols-5">
<div class="flex flex-col gap-4 lg:col-span-2">
<h2 class="text-xl font-bold">
{{ name }}
</h2>
<p class="text-sm text-muted-foreground">
{{ description }}
</p>
<div class="flex gap-4">
<a
v-for="social in socialLinks"
:key="social.name"
:href="social.href"
:aria-label="social.name"
class="text-muted-foreground transition-colors hover:text-foreground"
>
<component :is="social.icon" class="size-5" />
</a>
</div>
</div>
<div v-for="section in sections" :key="section.title">
<h3 class="mb-4 text-sm font-semibold">
{{ section.title }}
</h3>
<ul class="space-y-2">
<li v-for="link in section.links" :key="link.label">
<a
:href="link.href"
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
>
{{ link.label }}
</a>
</li>
</ul>
</div>
</div>
<div
class="mt-8 flex flex-col items-center justify-between gap-4 border-t pt-8 md:flex-row"
>
<p class="text-sm text-muted-foreground">
© {{ currentYear }} {{ name }}. All rights reserved.
</p>
<a class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors" :href="status.link">
<div class="relative size-2">
<span class="animate-ping absolute size-full rounded-full bg-green-500" />
<span class="absolute size-full rounded-full bg-green-500" />
</div>
{{ status.text }}
</a>
</div>
</footer>
</template> Block details
This footer block features a real-time status indicator with animated ping effect alongside organized link sections. It displays system availability through a visual dot that pulses while showing status text, complemented by social media icons and navigation links.
| Dependency | Source |
|---|---|
| Vue | NPM |
| lucide-vue-next | NPM |
With hover chevron
<script setup lang="ts">
import type { FunctionalComponent } from 'vue'
import { ChevronRightIcon, LinkedinIcon, MailIcon, TwitterIcon, YoutubeIcon } from 'lucide-vue-next'
import { computed } from 'vue'
interface Props {
name?: string
description?: string
sections?: {
title: string
links: {
label: string
href: string
}[]
}[]
socialLinks?: {
name: string
href: string
icon: FunctionalComponent
}[]
}
withDefaults(defineProps<Props>(), {
name: 'Acme Corp',
description:
'Building the future of web applications with modern technologies.',
sections: () => [
{
title: 'Product',
links: [
{ label: 'Pricing', href: '#' },
{ label: 'FAQs', href: '#' },
{ label: 'Changelog', href: '#' },
{ label: 'Roadmap', href: '#' },
],
},
{
title: 'Company',
links: [
{ label: 'About', href: '#' },
{ label: 'Blog', href: '#' },
{ label: 'Careers', href: '#' },
{ label: 'Contact', href: '#' },
],
},
{
title: 'Resources',
links: [
{ label: 'Documentation', href: '#' },
{ label: 'API Reference', href: '#' },
{ label: 'Guides', href: '#' },
{ label: 'Community', href: '#' },
],
},
],
socialLinks: () => [
{
name: 'Mail',
href: '#',
icon: MailIcon,
},
{
name: 'Twitter',
href: '#',
icon: TwitterIcon,
},
{
name: 'LinkedIn',
href: '#',
icon: LinkedinIcon,
},
{
name: 'YouTube',
href: '#',
icon: YoutubeIcon,
},
],
})
const currentYear = computed(() => new Date().getFullYear())
</script>
<template>
<footer class="container mx-auto px-4 py-12 md:px-6">
<div class="grid grid-cols-1 gap-8 md:grid-cols-4 lg:grid-cols-5">
<div class="lg:col-span-2">
<h2 class="mb-4 text-xl font-bold">
{{ name }}
</h2>
<p class="text-sm text-muted-foreground">
{{ description }}
</p>
</div>
<div v-for="section in sections" :key="section.title">
<h3 class="mb-4 text-sm font-semibold">
{{ section.title }}
</h3>
<ul class="space-y-2">
<li v-for="link in section.links" :key="link.label">
<a
:href="link.href"
class="group flex justify-start items-center text-sm text-muted-foreground transition-colors hover:text-foreground"
>
{{ link.label }}
<ChevronRightIcon
class="size-4 opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200 ease-in-out"
/>
</a>
</li>
</ul>
</div>
</div>
<div
class="mt-8 flex flex-col items-center justify-between gap-4 border-t pt-8 md:flex-row"
>
<p class="text-sm text-muted-foreground">
© {{ currentYear }} {{ name }}. All rights reserved.
</p>
<div class="flex gap-4">
<a
v-for="social in socialLinks"
:key="social.name"
:href="social.href"
:aria-label="social.name"
class="text-muted-foreground transition-colors hover:text-foreground"
>
<component :is="social.icon" class="size-5" />
</a>
</div>
</div>
</footer>
</template> Block details
This footer block features navigation links that reveal right chevron icons from Lucide vue-next library on hover. The arrows smoothly slide into view with a transition effect when users interact with menu items, enhancing visual feedback.
| Dependency | Source |
|---|---|
| Vue | NPM |
| lucide-vue-next | NPM |
Frequently asked questions
Are the footer blocks free to use?
Yes. All our footer blocks are free to use in personal and commercial projects.
How do I use these footer blocks in my project?
Simply browse our collection, click on the "Copy Code" button for your chosen block, and paste it into your Shadcn Vue project. All components are built with Tailwind CSS and shadcn Vue, so they'll work seamlessly with your existing setup.
Can I customize the footer blocks?
Absolutely! All our footer blocks are fully customizable. You can easily modify colors, spacing, typography, and layout by adjusting the Tailwind CSS classes in the component code.