Signature

A one row footer for personal sites: copyright, a handwritten signature in the middle and icon links. On mobile the signature sits above the row.

Dependencies

@radix-ui/react-slot@hugeicons/react@hugeicons/core-free-iconsmotion

Interaction Type

A minimal footer landmark. The first time it scrolls into view, the handwritten signature traces its outline and then fills in, once. It is an image with its own label, and reduced motion shows it already signed.

Props

Options you can pass to customize this component.

Prop

Type

Description

signature

string

Signed text. Defaults to "Nexvyn".

signatureLabel

string

Accessible name of the signature image. Defaults to "Signed, Nexvyn".

signatureFont

string

CSS font family of the signature. Defaults to var(--font-handwriting) with a cursive fallback.

socials

{ label: string; href: string; icon: ReactNode }[]

Icon links with 44px targets. The label becomes the aria-label. Defaults to GitHub and X.

copyright

ReactNode

className

string

Merged onto the footer with cn().

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/footer-signature.json

How to use

<FooterSignature signature="Ada Park" signatureLabel="Signed, Ada Park" />

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

acme.app

npx shadcn@latest addhttps://ui.nexvyn.dev/r/footer-signature.json