Gradient Heading
DisplayGradient-fill heading text with multiple presets — for hero sections.
Gradient HeadingDisplay · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import GradientHeading from @otfdashkit/ui.
Code
// Gradient Heading — Gradient-fill heading text with multiple presets — for hero sections.
//
// Install:
// bun add @otfdashkit/ui
import { GradientHeading } from '@otfdashkit/ui'
export function Example() {
return (
<GradientHeading>
{/* your content */}
</GradientHeading>
)
}Props
Props declared in the GradientHeading source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| animate | boolean | false | Whether to animate the gradient position |
| as | 'h2' | 'h3' | 'h1' | 'h4' | 'h5' | 'h6' | 'h2' | |
| direction | 'r' | 'br' | 'b' | 'bl' | 'l' | 'br' | Direction — default 'br' (bottom-right) |
| from | string | Tailwind gradient `from-` color class e.g. "from-indigo-400" | |
| preset | 'primary' | 'slate' | 'warm' | 'cosmic' | 'terminal' | 'aurora' | 'sunset' | 'custom' | 'primary' | |
| to | string | Tailwind gradient `to-` color class e.g. "to-violet-400" | |
| via | string | Tailwind gradient `via-` color class (optional) |