Wordmark Footer
Close a page with a contact invitation, navigation links, legal details, and a large wordmark.
- Dependencies
- No extra packages
- Size
- 189 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/wordmark-footer.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/wordmark-footer.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the wordmark-footer.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow / ctaLabel / ctaHref | string | — | The closing invitation. |
| brand / brandHref / tagline | string | — | Top-left brand (" / " is spaced like the original slash) and tagline; newlines break lines. |
| links | FooterLink[] | — | Two-column navigation, 44px rows. |
| noteEyebrow / note / noteLinkLabel / noteLinkHref | string | — | Right-hand studio note and underlined link. |
| wordmark | string | "onycx" | Large decorative word above the legal row. |
| legalLine / legal | string / FooterLink[] | — | Text after © year and the information links. |
| background / paper / line | string | "#2e2925" / "#faf8f4" / "#ffffff35" | Panel, text and hairline colours. |
| overlap | boolean | false | Pull the footer up 48px so its radii sit over the previous section. |