Gradient Ink
A two-tone headline treatment with forced-colour fallback.
import "./styles/gradient-ink.css";
export default function GradientInk({ variant = "Warm" }: { variant?: string }) {
return <p className={`ward-gradient-ink ${variant === "Cool" ? "is-cool" : ""}`}>Words with weight.</p>;
}.ward-gradient-ink { width:fit-content; margin:0; font-size:clamp(2rem,7vw,4rem); font-weight:750; letter-spacing:-.06em; line-height:1.1; color:#e6b98a; background:linear-gradient(100deg,#fff1d6,#e6b98a,#9c654e); background-clip:text; -webkit-text-fill-color:transparent; }
.ward-gradient-ink.is-cool { background-image:linear-gradient(100deg,#dff9ff,#86c8ef,#7979bd); }
@media(forced-colors:active){.ward-gradient-ink{background:none;-webkit-text-fill-color:currentColor}}Installation
pnpm dlx shadcn@latest add @ward/gradient-inknpx shadcn@latest add @ward/gradient-inkyarn dlx shadcn@latest add @ward/gradient-inkbunx --bun shadcn@latest add @ward/gradient-inkAdd the Ward registry to components.json once:
"registries": {
"@ward": "https://ward.so/r/{name}.json"
}Or install from the URL with no configuration: npx shadcn@latest add https://ward.so/r/gradient-ink.json
Copy each file from the Code tab into:
components/ward/GradientInk.tsxcomponents/ward/styles/gradient-ink.css
Update the import paths to match your project.
Usage
import GradientInk from "@/components/ward/GradientInk";<GradientInk variant="Cool" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "Warm" | "Cool" | "Warm" | Colour palette of the gradient applied to the text. |
Ward · Version 1.0.0 · Registry manifest