Componentnavigation
Footer Minimal
Single-row minimal footer: brand, links, copyright.
Preview
Live Preview
Installation
Tokens guide →Add to your project via CLI (zero dependencies, code you own):
npx bigbullui add footer-minimalOr install the full npm package:
npm install bigbulluiUsage
import { FooterMinimal } from "@/components/ui/footer-minimal";
<FooterMinimal />Source code
footer-minimal.tsxZero dependencies (only React + utils). Copy and paste directly into your project:
"use client";
import * as React from "react";
import { cn } from "./lib/utils";
export interface FooterMinimalProps extends React.HTMLAttributes<HTMLElement> {
brand?: string;
links?: { label: string; href: string }[];
copyright?: string;
}
/** Tek satır minimal footer: logo + linkler + telif. */
export function FooterMinimal({ brand = "bigbullui", links = [], copyright = "© 2026", className, ...props }: FooterMinimalProps) {
return (
<footer className={cn("flex flex-wrap items-center justify-between gap-3 border-t-2 border-dashed border-border px-4 py-3", className)} {...props}>
<style>{`@keyframes fmIn { from { opacity: 0; } to { opacity: 1; } }`}</style>
<span className="font-mono text-xs font-bold uppercase tracking-widest animate-[fmIn_0.4s_ease-out_both] motion-reduce:animate-none">{brand}</span>
<nav className="flex flex-wrap items-center gap-4 animate-[fmIn_0.4s_ease-out_0.1s_both] motion-reduce:animate-none" aria-label="Alt bilgi bağlantıları">
{links.map((l) => (
<a key={l.href} href={l.href} className="text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded-sm motion-reduce:transition-none">
{l.label}
</a>
))}
</nav>
<span className="font-mono text-[10px] text-muted-foreground animate-[fmIn_0.4s_ease-out_0.2s_both] motion-reduce:animate-none">{copyright}</span>
</footer>
);
}
Props
| Prop | Type | Description |
|---|---|---|
| brand | string | |
| links | { label: string; href: string }[] | |
| copyright | string |