Components
This is a responsive floating bottom navigation bar built with React and Framer Motion. It displays multiple menu items with icons and labels, adapting to screen size by showing icons only on small screens and icons with labels on larger screens. A sliding indicator smoothly animates under the active item, always staying aligned, providing clear visual feedback for the selected section. The design is modern, minimal, and works seamlessly in both light and dark themes.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/floating-navLoading preview...
import FloatingNav from "@/components/ui/floating-nav";
export default function DemoOne() {
return <FloatingNav />;
}