104Get started
HextaUI

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.

AllDesignEngineeringProductResearchMarketingSalesSupportOperationsFinance
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>
  )
}

Add this example

This adds the example as components/examples/scroll-fade/horizontal.tsx, together with the Scroll fade component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/scroll-fade-horizontal.json

To add only the component, follow the Scroll fade installation.

More Scroll fade examples

See them all, with keyboard support and accessibility notes, on the Scroll fade page.