Astra

Line Sidebar

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

Line Sidebar, a Astra 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 Astra 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.