Open-Source React Intranet Dashboard for Teams

Nexus is a modern intranet dashboard kit built with React, TypeScript, Shadcn/UI, and Tailwind CSS.

It offers a central location for team collaboration, employee engagement, and organizational information.

The dashboard integrates multiple features to create a unified employee experience.

You can use it to manage company announcements, maintain an employee directory, and facilitate peer-to-peer recognition through a “Kudos” system.

GitHub Repo

Live Demo

Features

🏠 Responsive Dashboard Hub with customizable card layouts and drag-and-drop functionality.

🌙 Dark/Light Mode Toggle with persistent user preferences across sessions.

👥 Employee Directory featuring searchable profiles with department filtering capabilities.

🎯 Focus Mode that removes distractions for improved productivity during deep work.

📅 Team Calendar Integration displaying birthdays, anniversaries, and company events.

🏆 Kudos Recognition System enabling peer-to-peer appreciation with real-time updates.

📢 Company Announcements with priority levels and advanced search functionality.

🔗 Quick Links Manager allowing users to create and organize personalized bookmarks.

🔍 Global Search with keyboard shortcuts (Cmd/Ctrl+K) for rapid information access.

📱 Mobile-First Design optimized for touch interfaces and various screen sizes.

♿ WCAG Compliance ensuring accessibility through keyboard navigation and screen readers.

🔄 Real-Time Updates providing live content feeds and notification systems.

Preview

Use Cases

Internal company portal for remote or hybrid teams to access announcements, calendars, and team members.
HR department dashboard for onboarding new employees and managing peer recognition programs.
Departmental intranet for engineering, marketing, or sales teams to share updates and resources.
Executive communication hub with priority-based announcement delivery and read tracking.
Developer starter kit for building custom internal tools with a polished UI and routing structure.

How to Use It

1. Clone the repository from GitHub:

git clone https://github.com/praveen-sripati/nexus.git
cd nexus

2. Install all project dependencies using npm:

npm install

3. Start the development server to begin working with the application:

npm run dev

4. Access the dashboard by opening your web browser and navigating to http://localhost:5173. The development server includes hot reloading, so changes you make to the code will automatically refresh in your browser.

5. For production deployment, build the optimized version:

npm run build
npm run preview

6. After installation, Nexus runs with sample data that demonstrates all features. You can customize the dashboard by modifying the configuration files in the src/data directory.

7. The dashboard layout is fully customizable through the drag-and-drop interface. Users can rearrange cards, hide components they don’t need, and save their preferences locally. Each component maintains its own state and can be independently configured.

8. Nexus uses Tailwind CSS for styling. You can modify the color scheme, typography, and spacing by updating the theme configuration in src/index.css. The dark mode implementation automatically adjusts all components while maintaining accessibility standards.

/* src/index.css */
@theme {
  --color-primary: /* your primary color */;
  --color-secondary: /* your secondary color */;
}

Related Resources

Shadcn/UI Component Library – The foundation UI components used throughout Nexus. Access comprehensive documentation and examples at ui.shadcn.com for building consistent interfaces.
React Router DOM – Client-side routing solution used for navigation. Find routing patterns and configuration guides at reactrouter.com.
Tailwind CSS v4 – Utility-first CSS framework powering the responsive design. Explore utility classes and customization options at tailwindcss.com.

FAQs

Q: Can I connect Nexus to a real backend?
A: Yes. The project uses mock data located in the src/data/ folder. You can modify the data-fetching logic within the components and custom hooks to connect to your own backend APIs.

Q: Is Nexus suitable for production environments?
A: Nexus is a comprehensive starter kit. You can build upon its foundation for a production application. It is configured for easy deployment on Vercel and other static hosting services.

Q: Does Nexus support authentication?
A: The current version does not include authentication. It is designed as a frontend template. You can integrate it with Firebase, Auth0, or your backend auth system.

Q: Can I deploy Nexus on Netlify or GitHub Pages?
A: Yes. The build outputs static files in the /dist folder. Deploy them to Netlify, GitHub Pages, AWS S3, or any static hosting provider.