# Scroll fade: Horizontal

> A row of filters that scrolls sideways. Pair it with `no-scrollbar`, also from shadcn's CSS, when the fade alone shows that there's more.

Example: https://hextaui.com/docs/scroll-fade/examples/horizontal
Component docs: https://hextaui.com/docs/scroll-fade.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/scroll-fade-horizontal.json
```

This adds `components/examples/scroll-fade/horizontal.tsx` with the Scroll fade component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/scroll-fade/horizontal.tsx"
const topics = [
  "All",
  "Design",
  "Engineering",
  "Product",
  "Research",
  "Marketing",
  "Sales",
  "Support",
  "Operations",
  "Finance",
]

export function ScrollFadeHorizontal() {
  return (
    <div
      tabIndex={0}
      role="region"
      aria-label="Topics"
      className="no-scrollbar flex w-full max-w-sm scroll-fade-x gap-2 overflow-x-auto rounded-md outline-none focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden"
    >
      {topics.map((topic) => (
        <span
          key={topic}
          className="shrink-0 rounded-full bg-muted px-3 py-1.5 text-sm"
        >
          {topic}
        </span>
      ))}
    </div>
  )
}
```

## More Scroll fade examples

- [One edge](https://hextaui.com/docs/scroll-fade/examples/edge.md)