Components
Loading preview...
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-navimport FloatingNav from "@/components/ui/floating-nav";
export default function DemoOne() {
return <FloatingNav />;
}