A modern, responsive admin dashboard UI demo built with React, Tailwind CSS, and Framer Motion. This project showcases UI/UX design patterns and data visualization components using mock data.
This is a UI demonstration project focused on showcasing design patterns and component architecture. All data displayed in the dashboard is static mock data, and no backend integration is implemented. The project serves as a visual template and UI component library.
- Demonstrate modern UI/UX design patterns
- Showcase responsive dashboard layouts
- Present data visualization possibilities with mock data
- Provide reusable component architecture
- Serve as a starting point for full-stack dashboard implementations
- Charts and graphs using Recharts with hardcoded sample data
- Static KPI cards with example metrics
- Placeholder analytics dashboards
- Sample data visualization patterns
- Responsive navigation and layouts
- Interactive animations using Framer Motion
- Modern design with Tailwind CSS
- Lucide React icons integration
- Accessible component patterns
- Overview Dashboard (static metrics)
- Products Display (sample catalog)
- User Management UI
- Mock Analytics Views
- Settings Interface
- React 18: Component architecture
- Tailwind CSS: Styling
- Framer Motion: Animations
- Recharts: Chart components
- React Router: Navigation
- Lucide React: Icons
- TypeScript: Type safety
- Vite: Build tool
│
├── public/ # Static public files (images, favicon, etc.)
│
│
├── src/
│ ├── components/ # Reusable React components
│ │ ├── analytics/ # Components for analytics dashboard
│ │ │ ├── AIPoweredInsights.jsx
│ │ │ ├── ChannelPerformance.jsx # Marketing channel performance chart
│ │ │ ├── CustomerSegmentation.jsx # Customer segment analysis radar chart
│ │ │ ├── OverviewCards.jsx # Key performance indicator cards
│ │ │ ├── ProductPerformance.jsx # Product sales and revenue comparison
│ │ │ ├── RevenueChart.jsx # Revenue tracking area chart
│ │ │ └── UserRetention.jsx # User retention line chart
│ │ │
│ │ ├── common/ # Shared/generic components
│ │ │ ├── Header.jsx # Page header component
│ │ │ ├── Sidebar.jsx # Navigation sidebar
│ │ │ └── StatCard.jsx # Statistic card with icon and value
│ │ │
│ │ ├── orders/ # Order-related components
│ │ │ ├── DailyOrders.jsx # Daily order volume line chart
│ │ │ ├── OrderDistribution.jsx # Order status distribution pie chart
│ │ │ └── OrdersTable.jsx # Searchable orders table
│ │ │
│ │ ├── overview/ # Dashboard overview components
│ │ │ ├── CategoryDistributionChart.jsx # Sales by product category
│ │ │ ├── SalesChannelChart.jsx # Sales channels performance
│ │ │ └── SalesOverviewChart.jsx # Comprehensive sales overview
│ │ │
│ │ ├── products/ # Product management components
│ │ │ ├── ProductsTable.jsx # Searchable product inventory table
│ │ │ └── SalesTrendChart.jsx # Product sales trend line chart
│ │ │
│ │ ├── sales/ # Sales-related visualization components
│ │ │ ├── DailySalesTrend.jsx # Daily sales bar chart
│ │ │ ├── SalesByCategoryChart.jsx # Sales distribution by category
│ │ │ └── SalesOverviewChart.jsx # Comprehensive sales analysis
│ │ │
│ │ ├── settings/ # User settings and preferences
│ │ │ ├── ConnectedAccounts.jsx # Social media account connections
│ │ │ ├── DangerZone.jsx # Account deletion option
│ │ │ ├── Notifications.jsx # Notification preferences
│ │ │ ├── Profile.jsx # User profile management
│ │ │ ├── Security.jsx # Security settings
│ │ │ ├── SettingSection.jsx # Reusable settings section wrapper
│ │ │ └── ToggleSwitch.jsx # Customizable toggle switch
│ │ │
│ │ └── users/ # User-related analytics components
│ │ ├── UserActivityHeatmap.jsx # User activity time distribution
│ │ ├── UserDemographicsChart.jsx # User age group distribution
│ │ ├── UserGrowthChart.jsx # User acquisition over time
│ │ └── UsersTable.jsx # Searchable user management table
│ │
│ ├── pages/ # Page components
│ │ ├── AnalyticsPage.jsx # Comprehensive analytics dashboard
│ │ ├── OrdersPage.jsx # Orders management and tracking
│ │ ├── OverviewPage.jsx # Main dashboard overview
│ │ ├── ProductsPage.jsx # Product inventory and management
│ │ ├── SalesPage.jsx # Sales performance tracking
│ │ ├── SettingsPage.jsx # User account and app settings
│ │ └── UserPage.jsx # User management and analytics
│ │
│ ├── App.jsx # Main application component and routing
│ ├── index.css # Global CSS with Tailwind directives
│ ├── main.jsx # React application entry point
│ └── index.html # Alternative HTML entry point
│
├── .eslintrc.cjs # ESLint configuration for code quality
├── .gitignore # Git ignored files and directories
├── index.html # Root HTML file
├── package.json # Project dependencies and scripts
├── postcss.config.js # PostCSS configuration
├── tailwind.config.js # Tailwind CSS customization
└── vite.config.js # Vite build tool configuration
- Clone the repository:
git clone https://github.com/6Glow/react-admin-dashboard.git- Install dependencies:
npm install- Start the development server:
npm run devThe project uses static data files for demonstration. Examples include:
// Sample sales data
export const salesData = [
{ month: 'Jan', sales: 4000 },
{ month: 'Feb', sales: 3000 },
// ... more mock data
];
// Sample user data
export const userData = [
{ id: 1, name: 'John Doe', role: 'Admin' },
{ id: 2, name: 'Jane Smith', role: 'User' },
// ... more mock data
];- All charts use predefined static data
- Visualization components are fully functional but display mock metrics
- Interactive elements work with hardcoded responses
- KPIs show example values
- Statistics are non-dynamic placeholders
- Trends and comparisons use sample data
- Display static entries
- Sorting and filtering work on mock datasets
- Pagination implemented with fixed data arrays
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewWe welcome contributions to improve the UI components and design patterns! Please follow these steps:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
To convert this UI demo into a full-featured application:
- Integrate a backend API
- Implement real authentication
- Add actual database connections
- Create real-time data updates
- Develop API services
- Add state management
- Implement error handling
- Add loading states
This project is licensed under the MIT License - see the LICENSE file for details.