Basekit Laravel UIBuild Laravel interfaces faster

🧩 Everything You Need to Build Laravel Interfaces ​

Stop rebuilding the same buttons, inputs, modals, dropdowns, tables, and feedback states for every Laravel application.

Basekit gives you 35 reusable Blade components with consistent styling, variants, sizing, theming, and interactive behavior — while keeping you in the Laravel ecosystem.

Use the components as they are, customize them to match your brand, or publish the underlying views when you need complete control.

Explore all 35 components →

🚀 Quick Start ​

1. Install Basekit ​

Install the package with Composer:

composer require basekit-laravel/basekit-laravel-ui

2. Include the CSS ​

Add Basekit to your application's main CSS file:

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

3. Include Alpine.js ​

Interactive components such as modals, dropdowns, tabs, toasts, tooltips, and selects use Alpine.js.

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>

4. Start Building ​

Use Basekit components directly from your Blade templates:

<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"
            icon="arrow-right"
        >
            Sign in
        </x-basekit-ui::button>
    </x-basekit-ui::stack>
</x-basekit-ui::card>

That's it. No component scaffolding required.

Read the installation guide →

🎨 Built for Customization ​

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

Theme with 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;
}

Theme changes are applied through CSS variables, making it easy to adapt Basekit to your application's visual identity.

Configure Your Components ​

Publish the configuration file to control enabled components, variants, sizes, and defaults:

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

For example:

// config/basekit-laravel-ui.php

return [
    'components' => [
        'button' => [
            'enabled' => true,
            'variants' => ['primary', 'secondary', 'danger'],
            'sizes' => ['sm', 'md', 'lg'],
            'default_variant' => 'primary',
            'default_size' => 'md',
        ],
    ],
];

Customize the Theme Source ​

Need deeper control over Basekit's styles? Publish the CSS theme:

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

You can then customize the theme source directly for your application.

Own the Markup ​

Need complete control over a component?

Publish the component views:

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

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

Learn more about theming →

⚡ Ship Only What You Use ​

Basekit's component-aware build system can generate CSS based on the components enabled in your configuration.

That means applications using only a subset of Basekit don't need to ship styles for every component.

In the included bundle-size comparison:

After configuring the components you need, build your optimized stylesheet:

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

This gives you the convenience of a complete component library without requiring every application to ship the complete stylesheet.

🧩 Component Catalog ​

Basekit includes 35 components organized around the UI patterns you'll use across Laravel applications.

📝 Forms ​

Build accessible forms with consistent validation, states, sizing, and styling.

• Button — Buttons with variants, sizes, icons, and states
• Input — Text inputs with labels, errors, hints, and icons
• Textarea — Multi-line text input with auto-resize
• Checkbox — Checkbox controls with label support
• Radio — Radio controls for single selections
• Select — Dropdown selection controls
• Multi-Select — Multiple selections with chips
• Toggle — Interactive switch controls
• Fieldset — Semantic groups for form controls
• Copy Button — Copy-to-clipboard with transient feedback

💬 Feedback ​

Communicate status, progress, loading states, and application feedback.

• Alert — Contextual alert messages
• Toast — Auto-dismissing notifications
• Tooltip — Contextual hover information
• Progress — Progress and completion indicators
• Spinner — Loading indicators
• Skeleton — Placeholder loading states
• Empty State — Empty data and no-results states

🧭 Navigation ​

Help users move through your application and interact with actions.

• Breadcrumb — Page hierarchy navigation
• Pagination — Paginated data navigation
• Tabs — Interactive tabbed interfaces
• Dropdown Menu — Interactive action menus
• Link — Consistently styled links

📐 Layout ​

Create consistent structure, spacing, and responsive layouts.

• Container — Responsive page containers
• Divider — Content separators
• Stack — Vertical and horizontal layouts
• Grid — Responsive grid layouts

📊 Display ​

Present application content and data consistently.

• Card — Group related content and actions
• Badge — Labels, counts, and status indicators
• Avatar — User and profile images
• Table — Structured data tables
• List — Styled ordered and unordered lists
• Description List — Structured key-value information
• Stat — Dashboard statistics and metrics

🪟 Overlays & Disclosure ​

Add interactive content without leaving the current page.

• Modal — Alpine-powered modal dialogs
• Accordion — Collapsible content panels

🛠️ Meta & Theme ​

Utilities for application metadata and runtime theming.

• SEO — Title, meta, and social head tags
• Theme Variables — Runtime theme palette CSS variables

✨ Ready to Build? ​

Browse every component, variant, size, and state in the interactive style guide.

Explore all 35 components →

Or jump straight into your application:

Get started with Basekit →