---
title: Headline
---

import { InstallationCommand } from '../../components/InstallationCommand.tsx'
import { Headline } from '@/../registry/components/ui/headline'
import { ComponentShowcase } from '../../components/ComponentShowcase.tsx'

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.

<ComponentShowcase component={<Headline>Welcome to our amazing platform!</Headline>} code={`const MyHeadline = () => {
  return (
    <Headline
      size="default"
      variant="bottom"
    >
      Welcome to our amazing platform!
    </Headline>
  )
}`} />

## Installation

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


<InstallationCommand component={'headline'} />


## Usage

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

```tsx
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

1. **"The text is too small!"** - Try using the `default` size. It's like turning up the volume, but for your eyes

2. **"The gradient isn't flowing right!"** - Check your `variant` prop. Sometimes you need to change direction to get the perfect flow

3. **"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! 🎯 