A modern, comprehensive library of KPIs, data visualizations, layouts, and storyboards for building powerful analytics dashboards. Built with Next.js, React, TypeScript, and Tailwind CSS.
- ✅ Added Jest and React Testing Library for comprehensive unit testing
- ✅ Fixed all TypeScript and ESLint errors for production-ready builds
- ✅ Updated metadata for better SEO and branding
- ✅ Added helper utilities with full test coverage
- ✅ Created detailed onboarding documentation with screenshots
- 📊 Rich Component Library: Extensive collection of KPI cards, data visualizations, layouts, and storyboard templates
- 🔍 Smart Search: Quickly find assets with real-time search functionality
- 💡 Interactive Onboarding: Guided tour with coach marks to help new users get started
- ⭐ Favorites System: Save and organize your frequently used components
- 🔐 Access Management: Request access to premium components with built-in approval workflow
- 📱 Responsive Design: Fully responsive UI that works seamlessly across all devices
- 🎨 Modern UI/UX: Clean, intuitive interface built with Tailwind CSS
- ⚡ High Performance: Optimized for fast loading and smooth interactions
- Getting Started
- Installation
- Development
- Project Structure
- Features Overview
- Onboarding Guide
- Technologies Used
- Contributing
- License
- Node.js 18.0 or higher
- npm or yarn package manager
- Git
- Clone the repository:
git clone https://github.com/rkgudboy/next-js-tailwind-kpi-library.git
cd next-js-tailwind-kpi-library- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser to see the application.
# Development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Run linting
npm run lint
# Run tests
npm test
# Run tests in watch mode
npm run test:watch
# Run tests with coverage
npm run test:coveragenext-js-tailwind-kpi-library/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── modals/ # Modal components
│ ├── cards/ # Card components
│ ├── SearchBar.tsx # Search functionality
│ ├── Navigation.tsx # Navigation tabs
│ └── ...
├── hooks/ # Custom React hooks
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
│ ├── mockData.ts # Mock data for components
│ └── helpers.ts # Helper functions
├── public/ # Static assets
│ └── screenshots/ # Application screenshots
├── __tests__/ # Test files
│ ├── components/ # Component tests
│ └── utils/ # Utility function tests
├── jest.config.js # Jest configuration
├── jest.setup.js # Jest setup file
├── README.md # Project documentation
├── ONBOARDING.md # Onboarding guide with screenshots
└── package.json # Project dependencies
- KPIs: Key performance indicators with various metrics and visualizations
- Data Visualizations: Charts, graphs, and data representation components
- Layouts: Pre-built dashboard layouts for different use cases
- Storyboards: Complete dashboard templates and workflows
- Real-time search across all components
- Filter by category, access status, and favorites
- Smart suggestions and autocomplete
- View component details and previews
- Request access to premium components
- Track request status (pending/approved)
- Bulk request functionality
- Add components to favorites for quick access
- Organize frequently used components
- Persistent favorites across sessions
- Modal previews with detailed information
- Copy component code snippets
- Export and integration options
- Responsive grid layout
For a detailed walkthrough of the application features with screenshots, see our Onboarding Guide.
The project uses Jest and React Testing Library for unit testing. Tests are located in the __tests__ directory.
# Run all tests
npm test
# Run tests in watch mode during development
npm run test:watch
# Generate coverage report
npm run test:coverage- Component Tests: Located in
__tests__/components/ - Utility Tests: Located in
__tests__/utils/ - Setup: Global test setup in
jest.setup.js - Configuration: Jest configuration in
jest.config.js
Example test structure:
import { render, screen } from '@testing-library/react';
import { ComponentName } from '@/components/ComponentName';
describe('ComponentName', () => {
it('renders correctly', () => {
render(<ComponentName />);
expect(screen.getByText('Expected Text')).toBeInTheDocument();
});
});- Frontend Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Custom components with Heroicons
- State Management: React hooks and context
- Testing: Jest with React Testing Library
- Build Tool: Next.js built-in bundler
- Utilities: Lodash for debouncing
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use functional components with hooks
- Maintain consistent code formatting
- Write meaningful commit messages
- Add appropriate comments for complex logic
- Design inspiration from modern dashboard interfaces
- Icons from Heroicons
For more information or support, please open an issue in the GitHub repository.