React Bits

Line Sidebar

Static list navigation with a cursor-proximity effect that shifts and highlights nearby items.

Line Sidebar, a React Bits component

Use Line Sidebar in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/LineSidebar-TS-TW
How to install React Bits components

Related components

  • Animated List

    A scrolling list whose rows spring into view, with a gliding selection and arrow keys.

  • Border Glow

    Glowing mesh-gradient border that follows cursor direction and intensifies near edges.

  • Card Nav

    A navigation bar that springs open into a row of cards, each with its own links.