Now let me check the page structure:

I have a clear understanding of the design system. The project uses:

• Colors: Design tokens (primary, secondary, muted, accent, etc.) with dark mode support
• Fonts: Geist Sans and Geist Mono
• Spacing & Radius: Standard shadcn scale with border-radius of 0.625rem
• Icons: Lucide React (standard with shadcn)

Now I'll create a modern bottom tab bar navigation component that matches this design system. I'll create:

1. A reusable BottomNav component
2. A demo page showing it in action

Let me create the component:

Now let me create a comprehensive demo page that shows the bottom nav in action:

Now let me update the layout to ensure proper background color styling:

I've created a production-ready bottom tab navigation component with a comprehensive demo page. Here's what I built:

BottomNav Component(/components/bottom-nav.tsx)

• Fixed positioning at the bottom of the viewport with md:hidden to show only on mobile/tablet
• 5 default navigation items (Home, Search, Dashboard, Saved, Profile) with Lucide React icons
• Active state indicator with animated underline and color change using Next.js routing
• Smooth transitions with backdrop blur effect and subtle border for polish
• Accessibility features including keyboard navigation, ARIA attributes, and semantic HTML
• Auto-hiding spacer that adjusts based on screen size to prevent content overlap
• Fully customizable - pass your own navigation items and styling

Demo Page(/app/page.tsx)

• Showcases the component with a clean layout and comprehensive documentation
• Includes feature cards, usage examples, and customization guides
• Responsive design that works seamlessly with the bottom nav

The component uses your existing design system with proper color tokens, spacing, and typography. The bottom nav automatically hides on larger screens (md breakpoint and above) via responsive Tailwind classes, making it perfect for mobile-first applications.