Basekit Laravel UIModern UI Components for Laravel

What is Basekit Laravel UI? ​

Reusable Blade UI components for Laravel apps using Tailwind CSS 4.

Quick Start ​

1. Installation ​

composer require basekit-laravel/basekit-laravel-ui

2. Include CSS ​

/* resources/css/app.css */
@import "../../vendor/basekit-laravel/basekit-laravel-ui/resources/css/dist/v1/theme.css";

3. Use Components ​

<x-basekit-ui::button variant="primary" icon="check">
    Save Changes
</x-basekit-ui::button>

<x-basekit-ui::input
    label="Email"
    placeholder="you@example.com"
    icon="envelope"
/>

<x-basekit-ui::card>
    <x-slot:header>
        <h3>Welcome</h3>
    </x-slot>

    Your content here...

    <x-slot:footer>
        <x-basekit-ui::button>Action</x-basekit-ui::button>
    </x-slot>
</x-basekit-ui::card>

Performance ​

Component-based builds can significantly reduce bundle size:

• Full bundle: 200KB (all components enabled)
• Minimal config: 55KB (3 components enabled)
• Reduction: 73%

To enable:

1. Publish Configuration ​

php artisan vendor:publish --tag=basekit-laravel-ui-config

2. Disable unused components ​

In config/basekit-laravel-ui.php

3. Build CSS: ​

php artisan basekit:ui:build

4. Include built file: ​

@import "../../public/vendor/basekit-laravel/v1/basekit-ui.css";

5. Rebuild assets: ​

npm run build

Features at a Glance ​

// config/basekit-laravel-ui.php
return [
    'components' => [
        'button' => [
            'enabled' => true,
            'variants' => ['primary', 'secondary'],
            'sizes' => ['sm', 'md', 'lg'],
        ],
    ],
];

/* Override CSS variables */
:root {
  --color-primary-600: #your-brand;
  --button-radius: 0.5rem;
  --card-padding: 2rem;
}

# Optional: build optimized CSS based on config
php artisan basekit:ui:build

# Optional: watch mode for package customization
php artisan basekit:ui:build --watch

Component Catalog ​

Form (8) ​

Build accessible forms with full validation support.

• Button - Versatile button with variants, sizes, and icons
• Input - Text input with error states and icons
• Textarea - Multi-line text input with auto-resize
• Checkbox - Checkbox with label support
• Radio - Radio button for single selections
• Select - Dropdown select for single-option selection
• Multi-Select - Select multiple options with chips
• Toggle - Switch toggle powered by Alpine.js

Feedback (7) ​

Provide user feedback and loading states.

• Alert - Alert banners for messages
• Toast - Notification toast with auto-dismiss
• Tooltip - Hover tooltip with positioning
• Progress - Progress bar for completion status
• Spinner - Loading spinner indicator
• Skeleton - Placeholder loading skeleton
• Empty State - No data or empty results display

Navigation (5) ​

Navigate through your application.

• Breadcrumb - Page hierarchy navigation
• Pagination - Paginated data navigation
• Tabs - Tabbed interface with Alpine.js
• Dropdown Menu - Interactive dropdown menu
• Link - Styled link component

Layout (4) ​

Structure your page layouts.

• Container - Responsive page container
• Divider - Horizontal separator
• Stack - Vertical/horizontal layout
• Grid - Responsive grid layout

Display (7) ​

Present your data.

• Card - Container for grouping content
• Badge - Labels, counts, and status indicators
• Avatar - User profile images
• Table - Styled data table
• List - Styled ordered/unordered lists
• Description List - Key-value pairs
• Stat - Dashboard statistics display

Overlay (2) ​

Modal dialogs and overlays.

• Modal - Modal dialog with Alpine.js
• Accordion - Collapsible content panels