Shadcn.io is not affiliated with official shadcn/ui
Navbar Social Links
A navigation bar with integrated social media icons built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a logo on the left, centered navigation links with hover animations, and social media icon buttons (Twitter/X, GitHub, Discord, YouTube) on the right alongside a CTA button using framer-motion transitions.
Showcase your social presence right in the navbar. This navigation bar integrates social media icon buttons alongside your main navigation, giving visitors instant access to your Twitter/X, GitHub, Discord, and YouTube channels. Hover states reveal subtle brand color hints while keeping the monochrome-first aesthetic intact. Built with framer-motion for smooth entrance animations and shadcn/ui Button for consistent styling.
Related Components
Documentation Navbar
Navbar for documentation sites with search and version picker
Blog Navbar
Publication navbar with category navigation
Portfolio Navbar
Creative portfolio navbar with availability indicator
Landing Page Navbar
Marketing navbar with conversion-focused CTAs
Minimal Navbar
Clean minimal navbar with hover underlines
Auth Buttons Navbar
Navbar with sign in and sign up buttons
FAQ
Was this page helpful?
Sign in to leave feedback.
Sidebar Toggle
A navigation bar with collapsible sidebar integration built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a toggle button to collapse and expand a mini sidebar preview below the navbar, showing icons when collapsed and icons with labels when expanded, using framer-motion layout animations.
Social Platform
A social media platform navigation bar built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a Connect logo, feed and explore links, messages badge with unread count, groups link, center search bar, create post button, notifications bell, and user avatar with framer-motion entrance animations.