A modern UI component library and e-commerce starter kit built with Laravel, React, and Tailwind CSS.
UI Kit is a comprehensive starter kit that combines Laravel's backend power with React's frontend flexibility. It includes a rich set of pre-built UI components, layouts, and pages to accelerate application development.
- Modern Tech Stack: Laravel 12, React 19, TypeScript, Tailwind CSS 4
- Component Library: 40+ reusable React components
- Authentication: Full authentication system with password reset
- E-commerce Ready: Product listings, cart, checkout, favorites
- Dashboard Layout: Admin dashboard with analytics
- Form Components: Input, Select, Checkbox, Radio, etc.
- Theming: Light and dark mode support
- Real-time Capabilities: WebSockets integration with Laravel Reverb
- Mobile Responsive: All components work on mobile and desktop
- PHP 8.2+
- Node.js 18+
- Composer
- SQLite or MySQL
- Clone the repository:
git clone https://github.com/yourusername/ui-kit.git
cd ui-kit- Install PHP dependencies:
composer install- Install JavaScript dependencies:
npm install- Copy the environment file:
cp .env.example .env- Generate application key:
php artisan key:generate- Create SQLite database (or configure MySQL in
.env):
touch database/database.sqlite- Run migrations:
php artisan migrate- Start the development server:
npm run dev
# or with SSR
npm run dev:ssrUI Kit includes a wide range of components:
- Layout Components: App Header, Sidebar, Navigation Menu
- Form Components: Input, Select, Checkbox, Radio, etc.
- Data Display: Table, Card, Badge
- Feedback: Alert, Dialog, Toast
- Navigation: Breadcrumb, Pagination
- Overlays: Modal, Sheet (side panel), Dropdown
- Media: Avatar, Image, Icon
The kit includes several pre-built pages:
- Authentication: Login, Register, Forgot Password
- E-commerce: Product Listings, Product Details, Cart, Checkout
- Dashboard: Analytics, User Management
- Settings: Profile, Password, Appearance
- User: Favorites, Orders
UI Kit supports both light and dark themes, with a system preference option. Theme settings can be changed via:
- Settings page
- Theme toggle in the header
Themes are implemented using CSS variables, making customization straightforward.
The project includes WebSocket integration with Laravel Reverb, providing real-time capabilities:
- Real-time notifications
- Live updates
- Chat functionality (framework ready)
# Start development server
npm run dev
# Start development server with SSR
npm run dev:ssr
# Build for production
npm run build
# Build for production with SSR
npm run build:ssr
# Lint code
npm run lint
# Type check
npm run types
# Format code
npm run formatui-kit/
├── app/ # Laravel backend code
├── config/ # Laravel configuration
├── database/ # Migrations and seeders
├── public/ # Public assets
├── resources/
│ ├── css/ # CSS files (Tailwind)
│ ├── js/
│ │ ├── components/ # React components
│ │ ├── hooks/ # Custom React hooks
│ │ ├── layouts/ # Page layouts
│ │ ├── lib/ # Utility functions
│ │ ├── pages/ # Page components
│ │ ├── stores/ # State management
│ │ └── types/ # TypeScript type definitions
│ └── views/ # Blade templates
├── routes/ # Laravel routes
└── vendor/ # Composer packages
For production deployment:
- Install dependencies:
composer install --optimize-autoloader --no-dev
npm ci- Build assets:
npm run build:ssr- Optimize Laravel:
php artisan config:cache
php artisan route:cache
php artisan view:cacheThis project is licensed under the MIT License.
- Laravel
- React
- Tailwind CSS
- shadcn/ui - Component inspiration
- Inertia.js
- Lucide Icons
- Radix UI