Future UI

Fluid Navbar

▧ Blocks

Fluid navigation bar with GSAP Flip animations and spark border effects.

navbarnavigationfluidgsapflipdropdownresponsiveblock

No preview available

GSAP Flip + Canvas Spark Border ~ Hover to Explore

Controls

#8b5cf6

Blocks / React Component

About Fluid Navbar

Fluid navigation bar with GSAP Flip animations and spark border effects.

Category Blocks
Framework React + TypeScript
Dependencies gsap, @gsap/react, lucide-react
Tags navbar, navigation, fluid, gsap, flip, dropdown, responsive, block

Install Fluid Navbar in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/fluid-navbar.json?key=YOUR_LICENSE_KEY"

Usage example

import { FluidNavbar } from './FluidNavbar';
// Also copy spark-engine.ts to the same directory

export default function Example() {
  return <FluidNavbar accentColor="#8b5cf6" />;
}