Outlined Mega Mark

Full-width responsive outlined headline with transparent fill and separate stroke colors for light and dark backgrounds — ideal for landing footers.

UniqueUI CLI

npx uniqueui add outlined-mega-mark

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/outlined-mega-mark.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

UniqueUIUniqueUI

Usage

"use client";
import { OutlinedMegaMark } from "@/components/ui/outlined-mega-mark";

export default function LandingFooter() {
  return (
    <OutlinedMegaMark
      fontSize="clamp(11.25rem, 10vw, 14.25rem)"
      strokeWidth={1}
      lightStrokeColor="var(--color-neutral-300)"
      darkStrokeColor="var(--color-neutral-700)"
      letterSpacing="-0.02em"
    >
      UniqueUI
    </OutlinedMegaMark>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	Text or nodes rendered in both light and dark stroke layers.
`fontSize`	`string`	Any valid CSS font-size (clamp, rem, px, etc.).
`letterSpacing`	`string`	CSS letter-spacing for the headline.
`lightStrokeColor`	`string`	Outline colour when the page is in light mode.
`darkStrokeColor`	`string`	Outline colour when the page is in dark mode.
`strokeWidth`	`number \| string`	Outline width; numbers become px (e.g. 2 → 2px). Use a string for units like rem.
`containerClassName`	`string`	Optional Tailwind classes for the outer wrapper.
`className`	`string`	Optional Tailwind classes for the inner paragraph.