Zivon – Premium React Social Media Network Template

Zivon is a complete, production-ready React social media template built with React 18, Vite, Tailwind CSS, React Router 6, the Context API, and Framer Motion. It ships every screen a modern social network needs — feed, profile, messaging, notifications, explore, friends, pages, reels, and settings — wrapped in a fully original premium design system. Everything is fully responsive, dark-mode ready, and persisted to localStorage so the entire experience works out of the box without a backend.

Why Zivon

Zivon was designed to give designers, agencies, startups, and indie founders a beautiful, working starting point for any social product. Instead of cloning the look of an existing platform, Zivon introduces an original brand identity built on a violet-to-coral gradient, glassmorphism, generous spacing, and confident display typography. Every component is hand-crafted, every state is considered, and every page works on mobile, tablet, and desktop.

Core Features

• Authentication UI — login and signup pages with full form validation, password strength meter, show/hide password, demo account, and persistent session via localStorage.
• Dynamic Feed — image posts, video posts, text posts, page posts, and sponsored ads, each with like, comment, share, and bookmark actions, plus infinite scroll.
• Create Post Composer — rich post creation with text, image upload, video upload, live preview, character counter, and one-click publishing.
• Comments & Replies — clean threaded comments with nested replies, optimistic UI, and per-comment reply composer.
• Reels Page — full-screen vertical reel feed with native swipe on mobile, snap-scrolling on desktop, auto-play in view, mute toggle, like/comment/share rail, music tag, and an animated playback progress bar.
• Friends Page — three-tab layout (Friends, Suggestions, Following) with live search, add-friend and message buttons, and rich user cards.
• Pages Directory — browse brand and publisher pages with rating, location, follower count, and one-click Like Page.
• Page Detail — long-form profile with five tabs (Posts, About, Photos, Videos, Reviews), milestone timeline, photo gallery, embedded videos, full reviews UI, related pages sidebar, and full contact card (website, email, phone, hours, founded).
• User Profile — cover image, profile picture, bio, stats, four tabs (Posts, Media, Likes, About), follow/unfollow, and a fully working Edit Profile modal.
• Messages — two-column chat layout with conversation list, search, message bubbles, real-time draft input, and a mobile-friendly back-to-list flow.
• Notifications — type-aware notifications (like, comment, follow, mention) with a navbar dropdown, dedicated page, mark-all-read, and unread badges.
• Explore — hero search with trending hashtags, people search, and post search.
• Settings — appearance, notifications, privacy, two-factor authentication, accent color, and dark/light mode toggle.
• Sponsored Ads — fully styled in-feed ad cards with sponsored badge, headline, image, and call-to-action bar.

Design & Aesthetic

Zivon ships a complete design system with custom Tailwind tokens — a violet brand spectrum, a warm coral accent, a neutral ink scale, soft shadows, mesh-gradient backgrounds, glassmorphism, and rounded card-based layouts. Typography pairs Plus Jakarta Sans for display headings with Inter for body copy. Subtle Framer Motion transitions animate modals, dropdowns, comments, posts, and reel slides for a polished, modern feel.

Dark Mode

Every page, component, and state is fully audited for dark mode. Surfaces, inputs, buttons, chips, dropdowns, tabs, toggles, hover states, focus rings, gradient backgrounds, scrollbars, and even text selection all have proper dark-mode counterparts. The theme is system-preference aware on first load and persists to localStorage.

Responsive Design

Built with a mobile-first approach. On mobile, the navbar collapses into a drawer, a sticky bottom tab bar provides one-thumb access to Home, Reels, Friends, Alerts, and Profile, and the chat list and message window swap into a single-column flow. On tablet, a search bar joins the navbar. On desktop, a sticky left sidebar appears with the user card and quick links. On wide screens, a right rail surfaces trending tags and people-to-follow.

Pages Included

• Login
• Signup
• Home Feed (image, video, text, page, and ad post variants)
• Explore
• Reels (full-screen vertical feed with swipe)
• Friends
• Pages (directory)
• Page Detail
• User Profile
• Edit Profile (modal)
• Messages
• Notifications
• Settings
• 404 Not Found

Technical Stack

• React 18 with hooks and functional components
• Vite 5 for the dev server and production build
• React Router 6 with protected routes
• Context API for global state (Auth, Theme, App store)
• Tailwind CSS 3 with a custom design token set
• Framer Motion for transitions
• Lucide React for icons
• localStorage for persistence (posts, comments, follows, page likes, reel likes, notifications, conversations, theme, session)

Code Quality

Clean, modular, scalable code organized by domain — components, pages, context, data, and utils. Every component is reusable, props are minimal, and the file structure is easy to extend. Replace the mock data and contexts with real API calls and you have a production application.

Getting Started

Run npm install followed by npm run dev for local development, or npm run build to produce an optimized static bundle ready to deploy to any host (Apache, Nginx, Vercel, Netlify, GitHub Pages, or shared hosting).

Demo Account

The template seeds a one-click demo account so reviewers can explore every feature instantly: demo@zivon.app / demo1234.