Footers that close out a page without making a fuss. Replace the links and details with your own.
Multi-column
A logo, short introduction, three link columns, and a legal row.
tsx
1"use client";23import { Logo } from "@/components/brand";4import { cn } from "@/lib/utils";56type Footer01Props = {7 className?: string;8};910const COLUMNS = [11 {12 title: "Product",13 links: ["Blocks", "Components", "Changelog", "Pricing"],14 },15 {16 title: "Company",17 links: ["About", "Blog", "Careers", "Contact"],18 },19 {20 title: "Resources",21 links: ["Docs", "Guides", "Support", "Status"],22 },23] as const;2425export function Footer01({ className }: Footer01Props) {26 return (27 <footer className={cn("@container w-full bg-background", className)}>28 <div className="mx-auto w-full max-w-5xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">29 <div className="flex flex-col gap-10 @[40rem]:flex-row @[40rem]:justify-between">30 <div className="max-w-xs">31 <Logo className="block h-4 w-auto text-foreground" />32 <p className="mt-4 text-sm tracking-wide text-muted-foreground">33 UI blocks and components for shipping polished product surfaces.34 </p>35 </div>3637 <div className="grid grid-cols-2 gap-8 @[32rem]:grid-cols-3 @[40rem]:gap-12">38 {COLUMNS.map((column) => (39 <div key={column.title}>40 <p className="text-sm font-medium tracking-wide text-foreground">41 {column.title}42 </p>43 <ul className="mt-3 flex flex-col gap-2">44 {column.links.map((link) => (45 <li key={link}>46 <a47 href="#"48 className="text-sm tracking-wide text-muted-foreground"49 >50 {link}51 </a>52 </li>53 ))}54 </ul>55 </div>56 ))}57 </div>58 </div>5960 <div className="mt-10 flex flex-col gap-2 border-t border-border pt-6 @[32rem]:flex-row @[32rem]:items-center @[32rem]:justify-between">61 <p className="text-xs tracking-wide text-muted-foreground">62 © 2026 Arctis. All rights reserved.63 </p>64 <div className="flex flex-wrap gap-4">65 <a href="#" className="text-xs tracking-wide text-muted-foreground">66 Privacy67 </a>68 <a href="#" className="text-xs tracking-wide text-muted-foreground">69 Terms70 </a>71 </div>72 </div>73 </div>74 </footer>75 );76}Installation
npx @arctis-sh/@arctis-sh/ui@latest add footer-01Usage
1import { Footer01 } from "@/components/blocks/footer/footer-01"1<Footer01 />Compact centered
A compact, centered logo with navigation and one copyright line.
tsx
1"use client";23import { Logo } from "@/components/brand";4import { cn } from "@/lib/utils";56type Footer02Props = {7 className?: string;8};910const LINKS = ["Product", "Docs", "Pricing", "Blog", "Contact"] as const;1112export function Footer02({ className }: Footer02Props) {13 return (14 <footer className={cn("@container w-full bg-background", className)}>15 <div className="mx-auto flex w-full max-w-3xl flex-col items-center gap-6 px-4 py-10 text-center @[32rem]:px-6 @[32rem]:py-14">16 <Logo className="block h-4 w-auto text-foreground" />17 <nav className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">18 {LINKS.map((link) => (19 <a20 key={link}21 href="#"22 className="text-sm tracking-wide text-muted-foreground"23 >24 {link}25 </a>26 ))}27 </nav>28 <p className="text-xs tracking-wide text-muted-foreground">29 © 2026 Arctis · Built for teams that ship UI30 </p>31 </div>32 </footer>33 );34}Installation
npx @arctis-sh/@arctis-sh/ui@latest add footer-02Usage
1import { Footer02 } from "@/components/blocks/footer/footer-02"1<Footer02 />Image panel
A footer CTA and links set over a cover image with a dark overlay.
tsx
1"use client";23import { Logo } from "@/components/brand";4import { Button } from "@/components/ui/button";5import { cn } from "@/lib/utils";67type Footer03Props = {8 className?: string;9};1011const LINKS = ["Blocks", "Components", "Docs", "Pricing"] as const;1213export function Footer03({ className }: Footer03Props) {14 return (15 <footer className={cn("@container w-full bg-background", className)}>16 <div className="mx-auto w-full max-w-5xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">17 <div className="relative min-h-[22rem] overflow-hidden rounded-xl @[32rem]:min-h-[26rem]">18 <img19 src="/assets/brand/demos/card-cover.png"20 alt=""21 className="absolute inset-0 size-full object-cover"22 />23 <div aria-hidden="true" className="absolute inset-0 bg-black/55" />2425 <div className="relative z-10 flex h-full min-h-[22rem] flex-col justify-between px-6 py-6 @[32rem]:min-h-[26rem] @[32rem]:px-10 @[32rem]:py-8">26 <Logo className="block h-4 w-auto self-start text-white" />2728 <div className="flex flex-col gap-8">29 <div className="flex flex-col gap-6 @[40rem]:flex-row @[40rem]:items-end @[40rem]:justify-between">30 <div className="max-w-md">31 <h2 className="text-2xl font-medium tracking-wide text-white @[32rem]:text-3xl">32 Ship pages that feel finished33 </h2>34 <p className="mt-3 text-sm tracking-wide text-white/75">35 Drop in blocks, restyle with your tokens, and keep moving.36 </p>37 </div>38 <Button type="button" size="sm">39 Get started40 </Button>41 </div>4243 <div className="flex flex-col gap-4 border-t border-white/20 pt-6 @[40rem]:flex-row @[40rem]:items-center @[40rem]:justify-between">44 <nav className="flex flex-wrap gap-x-5 gap-y-2">45 {LINKS.map((link) => (46 <a47 key={link}48 href="#"49 className="text-sm tracking-wide text-white/80"50 >51 {link}52 </a>53 ))}54 </nav>55 <p className="text-xs tracking-wide text-white/60">56 © 2026 Arctis. All rights reserved.57 </p>58 </div>59 </div>60 </div>61 </div>62 </div>63 </footer>64 );65}Installation
npx @arctis-sh/@arctis-sh/ui@latest add footer-03Usage
1import { Footer03 } from "@/components/blocks/footer/footer-03"1<Footer03 />