UIlab is a modern community and social community website built using Next.js and Tailwind CSS, designed for creators, groups, and content-driven platforms. It includes feed layouts, profiles, messages, communities, and a built-in light/dark theme, making it perfect for building an engaging and interactive social experience.
Installation & Setup
- npm install
- npm run dev
Additional Plugins & Packages
If you face any errors or missing modules, you may need to install extra libraries:
- npm install remixicon
- npm install bootstrap-icons
- npm install @iconify/react
- npm install remixicon react-icons @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons
- npm install swiper
- npm install react-countup
What’s Included
- Complete Next.js Source Code — Fully structured with pages, components, and layouts
- Tailwind CSS Setup — Custom colors, spacing, typography, and responsive utilities
- Light & Dark Mode — Built-in theme switcher using next-themes
- Reusable UI Elements — Cards, buttons, forms, dropdowns, modals, tabs
- Google Fonts Integration — Modern and clean typography
- Icon Libraries Setup — React Icons / Iconify included
- Fully Responsive Design — Optimized for desktop, tablet, and mobile
- Well-Organized Folder Structure — Easy to navigate and modify
- Quick Start Guide — Simple steps to install and run the project
Tech Stack Used
- Next.js (App Router) – Fast routing, improved performance, SSR, and static generation
- Tailwind CSS – Utility-first styling with responsive and consistent design
- next-themes – Built-in light & dark mode with smooth theme switching
- React Icons / Iconify – Large collection of social and UI icons
- Google Fonts – Clean and modern typography
- Swiper.js – Sliders for stories, trending creators, and featured sections
- React CountUp – Animated counters for statistics
Pages Included
- Home – Main landing area with highlights, featured content, and quick links
- Blog – List of articles, updates, and community posts
- Blog Details – Full blog article page with images and content
- Shop – Product listings, categories, and filter options
- Shop Details – Individual product page with description, price, and gallery
- Groups – Browse and join different community groups
- Members – Directory of all members within the community
- Member Details – User profile with bio, posts, and activity
- Courses – Course listing with categories and learning topics
- Course Details – Full details of selected course, lessons, and instructor info
- Events – Upcoming events, meetups, and community activities
- Event Details – Event description, schedule, location, and registration info
- FAQ Modal Popup – Quick help and frequently asked questions in modal format
- Report Modal Popup – Report form for posts, members, or issues displayed in a popup
Key Features
- Fully responsive pages for every device
- Community groups, members list, and detailed profiles
- Complete blog, shop, course, and event sections
- Detailed product, course, and event views
- Built-in FAQ and report modals for quick actions
- Fast loading and smooth user experience
- Animated stats using React CountUp
- Clean icons with Iconify and React Icons
- Tailwind CSS for fast styling and easy changes
- Well-organized, developer-friendly project structure
A well-structured and responsive platform that keeps everything simple, fast, and user-friendly, making it easy for people to connect, browse content, and enjoy a seamless experience.
Reviews
Clear filtersThere are no reviews yet.