block / navigation
PREVIEW READYFooter
A responsive multi-column footer carrying DesignOS authorship.
Designed as a complete stateful module
Responsive, keyboard-ready, theme-aware, and owned by your project after installation.
INSTALL / SOURCE REGISTRY
Add Footer to your project
The command adds the component source and its DesignOS base dependency.
$
pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/footer.jsonregistry/default/blocks/footer.tsx
import * as React from "react"
import { Blocks } from "lucide-react"
import "@/components/designos/designos.css"
export type FooterGroup = { title: string; links: { label: string; href: string }[] }
export function Footer({ groups, note = "Created by h4rithd.", homeHref = "/" }: { groups: FooterGroup[]; note?: React.ReactNode; homeHref?: string }) {
return <footer className="dos-footer"><div><a className="dos-wordmark" href={homeHref}><span className="dos-wordmark__mark"><Blocks aria-hidden="true" size={16} /></span>DesignOS</a><p style={{ color: "var(--dos-text-subtle)", fontSize: 12, lineHeight: 1.6, marginTop: 16 }}>{note}</p></div>{groups.map((group) => <nav key={group.title} className="dos-footer__group" aria-label={group.title}><strong className="dos-footer__title">{group.title}</strong>{group.links.map((link) => <a key={link.href} href={link.href}>{link.label}</a>)}</nav>)}</footer>
}
Component contract
- Source-owned after installation
- Dark and light theme variables
- Keyboard and visible-focus behavior
- Reduced-motion fallback
- Responsive from 320px upward
- IBM Plex Sans + JetBrains Mono hierarchy