Navis UI

A premium collection of highly-animated, meticulously crafted bottom navigation components for modern web and mobile-web applications. Navis UI provides drop-in components built with React and Tailwind CSS that feel incredibly fluid, tactile, and responsive.

Stop building boring navbars. Start building experiences.

✨ Features

• 15+ Premium Variants: From "Dynamic Island" and "Neon Cyber" to "Tactile Neumorphic" and "Mac Dock".
• Highly Animated: Fluid spring physics, layout animations, and satisfying micro-interactions.
• Copy & Paste Ready: No bloated npm packages. Use our CLI to inject raw components right into your src/ folder.
• Framework Agnostic-ish: Built in React, heavily utilizing Tailwind CSS. Works out of the box with Next.js (includes "use client" directives), Vite, Remix, and more.
• Fully Customisable: Because you own the code, you can tweak the colors, animations, and icons to perfectly match your brand.

🚀 Getting Started

You don't need to install a heavy dependency. Navis UI components are meant to be owned by you.

Using the CLI

You can easily scaffold a component directly into your project using our CLI:

# Example: Adding the Floating Navigation variant
npx navisinit add bottom-nav-floating

This will automatically drop BottomNavFloating.jsx into your src/components/ui/ directory.

Manual Copy & Paste

Alternatively, you can visit our Playground, test the navigation variants in real-time, and simply copy the source code directly from the UI.

📦 What's Inside the Repo?

This repository contains the source code for the Navis UI website, which includes:

• The Component Source: Found in src/bottom-nav/. This is where the magic happens.
• The Interactive Playground: A highly immersive environment for testing variants.
• The Bento Gallery: A visual showcase of all available components.
• The Documentation: Detailed guides on how to implement, style, and route the navigations.

To run the documentation and playground site locally:

npm install
npm run dev

🤝 Contributing

We love contributions! Whether you're fixing a bug, improving the docs, or designing a brand new navigation variant, we'd love to see it.

Please read our CONTRIBUTING.md to learn how to add new variants and submit Pull Requests.

📄 License

Navis UI is open-source and available under the MIT License. You are free to use it in personal and commercial projects.