A comprehensive UI component library built with Next.js 15, TypeScript, and shadcn/ui. Created by Faheem Alvi for Geek Tech Sol.
Note: This project is open source and free to use. Feel free to fork, clone, and modify it according to your needs. This is a reference implementation showcasing modern UI patterns and components.
- Modern UI Components: Built with shadcn/ui and Radix UI primitives
- TypeScript: Full type safety throughout the application
- Next.js 15: Latest Next.js with App Router
- Tailwind CSS: Utility-first CSS framework
- Framer Motion: Smooth animations and transitions
- Responsive Design: Mobile-first approach
- Dark Mode: Built-in theme switching
- Component Showcase: Live examples of all components
- Open Source: Free to use, fork, and modify
- Framework: Next.js 15
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui + Radix UI
- Icons: Lucide React
- Animations: Framer Motion
- Charts: Recharts
- State Management: Zustand
- Package Manager: pnpm
- Button
- Input
- Textarea
- Checkbox
- Switch
- Select
- Radio Group
- Slider
- Toggle
- Card
- Sheet
- Dialog
- Alert Dialog
- Tabs
- Accordion
- Separator
- Badge
- Avatar
- Table
- Progress
- Alert
- Toast
- Tooltip
- Popover
- Sidebar
- Top Navigation
- Breadcrumb
- Pagination
The GTS Shad/Cn Kit follows modern design principles:
- Consistent Spacing: 4px base unit system
- Typography Scale: Harmonious font sizing
- Color Palette: Semantic color tokens
- Component Variants: Multiple styles for each component
- Accessibility: WCAG 2.1 AA compliant
-
Clone the repository
git clone https://github.com/geektechsol/gts-shadcn-kit.git cd gts-shadcn-kit -
Install dependencies
pnpm install
-
Start the development server
pnpm dev
-
Open your browser Navigate to http://localhost:3000
🌐 View the live demo: https://faheemalvii.github.io/GTS-UI-Kit/
The application is automatically deployed to GitHub Pages on every push to the main branch.
- Login (
/login) - User sign-in with form validation - Signup (
/signup) - User registration with password strength - Forgot Password (
/forgot-password) - Password reset flow
- Main Dashboard (
/dashboard) - Analytics and metrics - Analytics (
/analytics) - Data visualization - Reports (
/reports) - Report generation
- Orders (
/orders) - Order management - Products (
/products) - Product catalog - Customers (
/customers) - Customer management - Suppliers (
/suppliers) - Supplier management
- Revenue (
/revenue) - Revenue tracking - Expenses (
/expenses) - Expense management - Invoices (
/invoices) - Invoice system
- Users (
/users) - User management - Settings (
/settings) - System configuration - Calendar (
/calendar) - Event scheduling - Profile (
/profile) - User profile management
This UI Kit serves as a reference implementation for:
- SaaS Applications: Complete dashboard and management interfaces
- Admin Panels: Comprehensive admin interfaces
- E-commerce: Product and order management systems
- Analytics Dashboards: Data visualization and reporting
- CRM Systems: Customer relationship management
- ERP Systems: Enterprise resource planning
- Learning: Study modern React/Next.js patterns
- Starting Point: Use as a foundation for your own projects
The kit includes a comprehensive theme system:
// Customize colors in globals.css
:root {
--primary: 222.2 84% 4.9%;
--primary-foreground: 210 40% 98%;
// ... more color tokens
}All components are built with Tailwind CSS and can be easily customized:
<Button
variant="outline"
size="lg"
className="custom-styles"
>
Custom Button
</Button>Each component includes:
- Props API: Complete TypeScript definitions
- Usage Examples: Real-world implementation examples
- Variants: All available component variants
- Accessibility: ARIA attributes and keyboard navigation
This project is configured for automatic deployment to GitHub Pages:
- Fork the repository to your GitHub account
- Enable GitHub Pages in your repository settings
- Set source to GitHub Actions in Pages settings
- Push to main branch - deployment happens automatically
The app will be available at: https://faheemalvii.github.io/GTS-UI-Kit/
# Build for production
pnpm run export
# The static files will be in the 'out' directory
# Upload the contents to your hosting provider- Vercel: Connect your GitHub repo for automatic deployments
- Netlify: Drag and drop the
outfolder or connect your repo - AWS S3: Upload the
outfolder contents to an S3 bucket - Any static hosting: The
outfolder contains all static files
This project is designed to be forked and customized for your specific needs:
- Fork the repository to your GitHub account
- Clone your fork locally
- Customize the components and styling as needed
- Deploy to your preferred platform
- Modify the codebase to fit your requirements
This project is licensed under the MIT License - see the LICENSE file for details.
- ✅ Use in personal and commercial projects
- ✅ Modify and customize as needed
- ✅ Distribute your modified versions
- ✅ Use in proprietary software
- ✅ Fork and maintain your own version
- 📝 Include the original license and copyright notice
- 📝 Give appropriate credit to the original author
- 📝 Document any significant changes you make
This project is provided as-is for educational and reference purposes. While it's open source and free to use, please note:
- No Active Maintenance: This project is not actively maintained
- No Issue Support: Issues and pull requests will not be addressed
- Use at Your Own Risk: Please test thoroughly before using in production
- Fork & Customize: Feel free to fork and modify according to your needs
Faheem Alvi
Lead Developer at Geek Tech Sol
Email: faheem@geektechsol.com
Geek Tech Sol
Modern software solutions and UI component libraries
Website: geektechsol.com
Built with ❤️ by Faheem Alvi for Geek Tech Sol