uix-uiFooter
Site footer. 2 types × 2 themes.
import { Footer } from "@/components/ui/footer";
export default function Example() {
return (
<div style={{ width: "100%" }}>
<Footer
type="simple"
brand={<b className="text-label-large">Shapla Tea</b>}
links={[{ label: "Shipping", href: "#shipping" }, { label: "Returns", href: "#returns" }, { label: "Contact", href: "#contact" }]}
copyright="© 2026 Shapla Tea, Dhanmondi, Dhaka"
/>
</div>
);
}
Installation
$ npx uix-ui@latest add footerThis copies the file into components/ui/footer.tsx in your project. npx shadcn@latest add @uix/footer works too.
Usage
import { Footer } from "@/components/ui/footer";
<div style={{ width: "100%" }}>
<Footer
type="simple"
brand={<b className="text-label-large">Shapla Tea</b>}
links={[{ label: "Shipping", href: "#shipping" }, { label: "Returns", href: "#returns" }, { label: "Contact", href: "#contact" }]}
copyright="© 2026 Shapla Tea, Dhanmondi, Dhaka"
/>
</div>
Examples
Columns
import { Footer } from "@/components/ui/footer";
export default function Example() {
return (
<div style={{ width: "100%" }}>
<Footer
type="columns"
brand={<b className="text-label-large">Shapla Tea</b>}
tagline="Small-batch tea from Sylhet and Darjeeling."
columns={[
{ title: "Shop", links: [{ label: "Green tea", href: "#green" }, { label: "Black tea", href: "#black" }, { label: "Gift boxes", href: "#gifts" }] },
{ title: "Help", links: [{ label: "Delivery", href: "#delivery" }, { label: "Returns", href: "#returns" }, { label: "Contact", href: "#contact" }] },
]}
copyright="© 2026 Shapla Tea"
/>
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | simple | columns | "simple" | |
theme | light | dark | "light" | |
brand | React.ReactNode | – | Logo and name. |
tagline | React.ReactNode | – | Short line under the brand (columns type). |
links | FooterLink[] | – | Links next to the brand (simple type). |
columns | FooterColumn[] | – | Link groups (columns type). |
social | React.ReactNode | – | Social icons or links at the end of the bottom bar (columns type). |
copyright | React.ReactNode | – | Copyright line. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts