The Headline - because sometimes your text needs to make a statement. This component is like that friend who always speaks in ALL CAPS, but in a more elegant way. Perfect for when you want your words to stand out without actually yelling at your users.

Preview

Code

Welcome to our amazing platform!

Installation

First, make sure you have the required dependencies. This component is pretty low-maintenance, unlike some of your other UI elements:

npx vynk add headline

yarn vynk add headline

pnpm dlx vynk add headline

bunx --bun vynk add headline

Usage

Here's how to make your text stand out (without being obnoxious about it):

import { Headline } from "@/components/ui/headline"

// Your component
const MyComponent = () => {
  return (
    <Headline
      size="medium"
      variant="top"
    >
      Hello, World!
    </Headline>
  )
}

Props

The component comes with a few options to make your headlines just the right amount of extra:

Prop	Type	Required	Description
`size`	`'small' \| 'default' \| 'medium'`	No	How big your headline should be. Choose wisely, size matters
`variant`	`'bottom' \| 'top' \| 'right' \| 'topRight' \| 'topLeft'`	No	The direction of the gradient. Because even text needs a little flow
`className`	`string`	No	Additional CSS classes. For when you need that extra pizzazz

Features

Gradient Text: Beautiful gradient effects that make your text pop
Responsive Sizes: Looks good on all screens, unlike your ex's selfies
Accessible: Screen readers love it, and so will your users
Dark Mode Ready: Works in the light and the dark, just like a good spy

Common Issues

"The text is too small!" - Try using the default size. It's like turning up the volume, but for your eyes
"The gradient isn't flowing right!" - Check your variant prop. Sometimes you need to change direction to get the perfect flow
"It's not centered!" - That's what the className prop is for. Add some flexbox magic

Contributing

Found a bug? Want to make it even more dramatic? Feel free to submit a PR. Just make sure your code is as clean as your browser history (which we all know is spotless, right?).

The Headline - because sometimes your text needs to be the center of attention! 🎯

Vynk

Headline