Shadcn.io is not affiliated with official shadcn/ui
Social Links Navbar Block
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.
Social Links Navbar Block preview
Installation
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 Navbar Block
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.
React Social Platform Navbar Block
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.