Default
Italic name, dark pill, glass backdrop, bottom-right of the viewport.
Floating credit badge with author name and portfolio link.
A fixed-position pill that floats in any corner of the viewport. Shows a "Made by" prefix and a clickable author name linked to a portfolio or social URL. Italic name by default, but the font and style are fully configurable per author.
Drop the package in. The badge ships with its own CSS — no global setup, no positioning utilities required.
pnpm add @roy-ui/uiimport { MadeBy } from '@roy-ui/ui';Two required props: name and href. Default position is bottom-right, default style is italic. Render once anywhere — it pins itself to the viewport, not the parent.
Italic name, dark pill, glass backdrop, bottom-right of the viewport.
Override the "Made by" prefix with anything — "Building by", "Crafted by", "ⓒ", etc.
Pass any CSS font-family string via nameFont. Pair an italic serif for elegance, a mono for tech, or a display face for a signature look.
<MadeBy
name="Roy"
href="https://royrana.dev"
nameFont="'Playfair Display', 'Times New Roman', serif"
/>Pass nameStyle='normal' if italic doesn't fit your brand.
Pass any ReactNode to the icon slot — avatar, emoji, sparkle, dot.
Four viewport corners. Default is bottom-right — the least intrusive on most layouts.
<MadeBy name="Roy" href="..." position="bottom-right" /> // default
<MadeBy name="Roy" href="..." position="bottom-left" />
<MadeBy name="Roy" href="..." position="top-right" />
<MadeBy name="Roy" href="..." position="top-left" />Every visual surface is wired to a CSS variable scoped to .royui-madeby. Tune the palette, the shadow, even the name's font and weight without touching the component.
.royui-madeby {
--royui-madeby-bg: #ffffff;
--royui-madeby-border: rgba(0, 0, 0, 0.08);
--royui-madeby-prefix: rgba(0, 0, 0, 0.55);
--royui-madeby-name: #111;
--royui-madeby-name-hover: #6366f1;
--royui-madeby-name-font: 'Caveat', cursive;
--royui-madeby-name-weight: 600;
}Every native anchor attribute is forwarded — onClick, target, rel, aria-*, ref.
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Display name shown after the prefix. Required. |
href | string | — | URL the badge links to. Required. |
prefix | ReactNode | 'Made by' | Copy shown before the name. Accepts strings or JSX. |
position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-right' | Which viewport corner the badge pins to. |
icon | ReactNode | — | Optional leading slot — avatar, mark, emoji, etc. |
nameFont | string | inherit | CSS font-family for the author name only. |
nameStyle | 'italic' | 'normal' | 'oblique' | 'italic' | Font style for the author name. |
...rest | AnchorHTMLAttributes | — | All native <a> props (target, rel, onClick, aria-*, ref). |