fern—ui
Components / Scroll Feed Tabs

Scroll Feed Tabs

A dark pill tab strip with a sliding green highlight, pointer-reactive radial glow, and accessible Radix Tabs. Optional card shell matches the Peerlist-style reference. Copy the full source from components/scroll-feed-tabs/scroll-feed-tabs.tsx.

Installation

Install the component using the shadcn CLI:

npx shadcn@latest add ChinmayNoob/fern-ui/scroll-feed-tabs

Preview

Switch tabs, then move the pointer across the track to shift the glow.

Usage

tsx
import { ScrollFeedTabs } from "@/components/scroll-feed-tabs"

export function Example() {
  return (
    <ScrollFeedTabs
      hrefs={{
        newest: "/feed",
        trending: "/feed/trending",
        following: "/feed/following",
      }}
      preventNavigation={false}
    />
  )
}

Source

Overview excerpt; the complete implementation lives in the component file (including layout measurement and Motion CSS variables).

index.tsxtsx
export {
  ScrollFeedTabs,
  SCROLL_FEED_TABS,
  type ScrollFeedTabId,
  type ScrollFeedTabsProps,
} from "./scroll-feed-tabs"
scroll-feed-tabs.tsxtsx
"use client"
// Radix Tabs + Motion: segmented control with a clipped “active” layer,
// radial glow that follows the pointer, and ResizeObserver for layout.

import { Tabs } from "radix-ui"
import { motion, cubicBezier, MotionConfig } from "motion/react"
import { cn } from "@/lib/utils"

export function ScrollFeedTabs({
  className,
  hrefs,
  withCard = true,
  preventNavigation = true,
}: ScrollFeedTabsProps) {
  /* merges DEFAULT_LINKS, optional white card shell, inner track */
}

function ScrollFeedTabsInner(/* links, preventNavigation */) {
  /* measure active segment vs trackRef for clip-path;
     onMouseMove interpolates glow position + circle size */
}