Footer

Layout

Website footer with links, social media, and copyright information.

Import

import { 
  PixelFooter,
  PixelFooterGrid,
  PixelFooterSection,
  PixelFooterTitle,
  PixelFooterLinks,
  PixelFooterLink,
  PixelFooterDivider,
  PixelFooterBottom,
  PixelFooterCopyright,
  PixelFooterSocial,
  PixelFooterSocialLink,
  PixelFooterLogo,
  PixelFooterDescription
} from "@/components/ui/pixel/pixel-footer"

Usage

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-footer.tsx

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelFooterVariants = cva("relative w-full border-t-4 border-black", {
  variants: {
    variant: {
      default: "bg-white dark:bg-[#2a2a2a]",
      primary: "bg-[#ff8c00] text-white",
      secondary: "bg-[#ffd700] text-black",
      dark: "bg-black text-white border-[#ff8c00]",
    },
    size: {
      sm: "py-8",
      md: "py-12",
      lg: "py-16",
    },
  },
  defaultVariants: {
    variant: "default",
    size: "md",
  },
});

export interface PixelFooterProps
  extends React.HTMLAttributes<HTMLElement>,
    VariantProps<typeof pixelFooterVariants> {}

const PixelFooter = React.forwardRef<HTMLElement, PixelFooterProps>(
  ({ className, variant, size, children, ...props }, ref) => {
    return (
      <footer
        ref={ref}
        className={cn(pixelFooterVariants({ variant, size }), className)}
        {...props}
      >
        <div className="container mx-auto px-4">{children}</div>
      </footer>
    );
  },
);
PixelFooter.displayName = "PixelFooter";

const PixelFooterGrid = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(

// ... (more code below)

Props

PropTypeDefaultDescription
variant"default" | "primary" | "secondary" | "dark""default"Footer visual style
size"sm" | "md" | "lg""md"Padding size

Examples

Basic Footer

Simple footer with sections

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.