Gradient Heading
DisplayMITGradient-fill heading text with multiple presets — for hero sections.
bun add @otfdashkit/ui
Preview
Gradient HeadingDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { GradientHeading } from '@otfdashkit/ui'
export function Example() {
return <GradientHeading as="h1">Build faster with OTF</GradientHeading>
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
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) |