ComponentsText effects
Outline Lettering
Large outlined lettering that draws itself in, and whose outline lights up in colour around the pointer.
"use client";
import { OutlineLettering } from "@/components/miyuki-ui/outline-lettering";
export default function OutlineLetteringDemo() {
return (
<div className="relative size-full min-h-60">
<OutlineLettering
text="yuki"
className="absolute inset-x-6 inset-y-6 w-auto font-display font-extrabold tracking-[-0.01em] sm:inset-x-12"
/>
</div>
);
}Install
npx shadcn@latest add @miyuki-ui/outline-letteringThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
OutlineLettering
Prop
Type