README

Basekit Laravel UI

Build polished Laravel interfaces without rebuilding the same UI components every time. Basekit Laravel UI is a collection of 35 production-ready Blade components for Laravel, powered by Tailwind CSS and Alpine.js. Buttons, inputs, modals, tables, dropdowns, tabs, toasts, pagination and more — ready to drop into your Laravel application and customize to match your brand.

Explore all components in the style guide and read the full docs at basekit‑laravel.github.io/basekit‑laravel‑ui.

✨ Why Basekit?

Laravel makes building applications enjoyable. Building and maintaining the same buttons, inputs, modals, dropdowns and other UI primitives for every application doesn't.

Basekit gives you a reusable UI foundation while keeping you in the Laravel ecosystem:

🧩 35 ready-to-use components — from form controls to modals, tables, navigation and feedback.
🧱 Blade first — use familiar Laravel Blade components instead of adopting another frontend framework.
🎨 Tailwind CSS — works naturally alongside your existing Tailwind application.
🖌️ Easy theming — customize colors, spacing and other design tokens with CSS variables.
⚡ Alpine-powered interactions — interactive components without building a JavaScript application.
🎯 IDE friendly — PHP component classes provide autocomplete and discoverable APIs.
🔧 Own the markup when you need to — publish component views and customize them directly.
📦 Ship less CSS — enable only the components you use and build an optimized stylesheet.

🚀 Quick Start

Install the package:

composer require basekit-laravel/basekit-laravel-ui

Import Basekit's CSS into your application's stylesheet:

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

If you're already using Livewire, Alpine.js is available through @livewireScripts.

Otherwise, include Alpine.js in your layout:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Now use Basekit components directly from Blade:

<x-basekit-ui::card>
    <x-slot:header>
        <h2 class="text-xl font-semibold">Welcome back</h2>
    </x-slot>

    <x-basekit-ui::stack spacing="lg">
        <x-basekit-ui::input
            name="email"
            type="email"
            label="Email"
            icon="envelope"
        />

        <x-basekit-ui::input
            name="password"
            type="password"
            label="Password"
        />

        <x-basekit-ui::button type="submit" variant="primary">
            Sign in
        </x-basekit-ui::button>
    </x-basekit-ui::stack>
</x-basekit-ui::card>

That's it. No component scaffolding required.

See the installation guide for more details.

🎨 Built for Customization

Basekit comes with sensible defaults, but gives you full control when you need it.

CSS Variables

For quick customization, override Basekit's CSS variables in your application:

:root {
  --color-primary-600: #your-brand-color;
  --button-radius: 0.5rem;
  --card-padding: 2rem;
}

Publishing Views

Publish component views for full customization:

php artisan vendor:publish --tag=basekit-views

Published views are copied to resources/views/vendor/basekit/ and automatically override package components.

Publish the Configuration

Need more control over components, variants, sizes, and defaults? Publish the configuration file:

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

Customize the Theme

Publish the Basekit CSS theme to customize the source styles directly:

php artisan vendor:publish --tag=basekit-laravel-ui-css-v1

Build Your CSS

Build an optimized stylesheet based on your configuration:

php artisan basekit:ui:build

While developing, use watch mode to automatically rebuild when your configuration or styles change:

php artisan basekit:ui:build --watch

Need complete control over the markup? You can also publish the component views and customize them directly:

php artisan vendor:publish --tag=basekit-views

Learn more about theming and customization.

🧩 Available Components

The package includes 35 components organized into 8 categories.

📝 Form Components (10)

💬 Feedback Components (7)

🧭 Navigation Components (5)

📐 Layout Components (4)

📊 Display Components (7)

🪟 Overlay Components (2)

🛠️ Utilities (2)

Browse all available components in the style guide and read the full docs at basekit-laravel.github.io/basekit-laravel-ui.

⚡ Ship Only What You Use

Basekit can build its stylesheet based on the components enabled in your configuration.

In the included bundle-size comparison:

All components: ~200 KB
3 components: ~55 KB
Reduction: ~73%

Configure the components you need:

'components' => [
    'button' => [
        'enabled' => true,
    ],
    // ...
],

Then build your optimized stylesheet:

php artisan basekit:ui:build

Use watch mode while developing:

php artisan basekit:ui:build --watch

📚 Documentation

Explore the full documentation for installation, configuration, theming and component APIs.

Want to see everything first?

Browse the interactive component style guide →

📄 License

Basekit Laravel UI is open-source software licensed under the MIT License.

basekit-laravel / basekit-laravel-ui

Maintainers

Package info

Statistics

Security