Back to Components

Flow Sidebar

A scroll-aware sidebar navigation with real section tracking, smooth click-to-scroll, and a temporary curved SVG line that connects the previous and next active dots. Supports any number of items, light and dark themes, reduced motion, keyboard navigation, and a horizontal layout for narrow screens.

Preview

Installation

Install the component using the CLI.

npx shadcn@latest add https://shreyashtech.me/r/flow-sidebar.json

Usage

Import the component:

import { AnimatedSidebar } from "@/components/flow-sidebar"

Use it in your code:

<AnimatedSidebar
  sections={[
    { id: "introduction", label: "Introduction" },
    { id: "history", label: "History" },
    { id: "overview", label: "Overview" },
  ]}
  accentColor="#ff5a4f"
/>

Props

PropertyTypeDefaultDescription
sectionsSidebarSection[]-Navigation items (id, label, optional href).
accentColorstring#ff5a4fColor of the active dot and curve.
orientation"vertical" | "horizontal" | "responsive""vertical"Layout direction.