Animated React navigation components
Floating and resizable navbars, a morphing menu, an animated sidebar and tabs. Keyboard support follows the WAI-ARIA patterns: Escape closes, focus returns, arrow keys move between tabs.
6 components · free and MIT licensed · install any of them with the shadcn CLI
Animated Sidebar
Icon rail that expands on hover or focus and turns into a drawer on narrow screens.
Sketch in the browser
Start from tokens, not pixels. Every colour and radius maps to a CSS variable you can re-theme later.
Animated Tabs
Tabs with a gliding pill and panels stacked like cards that peek behind.
Scroll down in this box to hide the bar, then scroll up to bring it back.
Floating Navbar
Hides on scroll down, returns the moment you scroll up.
Navbar Menu
Hover-driven menu whose pill and panel morph between items.
Scroll inside this box — the bar shrinks into a floating pill.
Resizable Navbar
Full-width navbar that shrinks into a floating, blurred pill once you scroll.
Sticky Banner
Dismissible announcement bar pinned above the header.