PHPackages                             basekit-laravel/basekit-laravel-ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. basekit-laravel/basekit-laravel-ui

ActiveLibrary[Templating & Views](/categories/templating)

basekit-laravel/basekit-laravel-ui
==================================

A modular Laravel UI component library with reusable Blade components, Tailwind 4 theming, and a built-in style guide.

v1.2.3(1w ago)06[1 PRs](https://github.com/basekit-laravel/basekit-laravel-ui/pulls)MITBladePHP ^8.3CI passing

Since Apr 22Pushed 6d agoCompare

[ Source](https://github.com/basekit-laravel/basekit-laravel-ui)[ Packagist](https://packagist.org/packages/basekit-laravel/basekit-laravel-ui)[ RSS](/packages/basekit-laravel-basekit-laravel-ui/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (7)Dependencies (26)Versions (13)Used By (0)

 [![Basekit Laravel UI Examples](public/basekit-ui-examples.png)](public/basekit-ui-examples.png)

Basekit Laravel UI
==================

[](#basekit-laravel-ui)

[![Latest Version on Packagist](https://camo.githubusercontent.com/1faaa0156a586c16cb76cc0f3f83cab47982665880b277ec3ff10bd5b87f5872/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f626173656b69742d6c61726176656c2f626173656b69742d6c61726176656c2d75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/basekit-laravel/basekit-laravel-ui)

A modular Laravel UI component library built with **Blade components**, **Tailwind 4 CSS**, and **Alpine.js** for rich, interactive interfaces.
Create rich, production‑ready UIs faster with 33 pre‑built components, configurable theming, and a built‑in style guide.

Explore all components in the [style guide](https://basekit-laravel.github.io/basekit-laravel-ui/styleguide.html) and read the full docs at [basekit‑laravel.github.io/basekit‑laravel‑ui](https://basekit-laravel.github.io/basekit-laravel-ui).

---

🌟 Features
----------

[](#-features)

- 🎨 **Tailwind 4 CSS‑based theming** – Runtime customization via CSS variables.
- ✨ **Heroicons integration** – Beautiful icons out of the box.
- 🔧 **Component toggle & defaults** – Enable/disable components and set default variants and sizes.
- 🌲 **Component‑aware CSS build** – Include CSS only for enabled components.
- 🎯 **Type‑safe components** – PHP classes with IDE autocomplete.
- 📦 **Publishable views** – Customize component templates directly.

---

📦 Installation
--------------

[](#-installation)

### Basic Setup

[](#basic-setup)

Install via Composer:

```
composer require basekit-laravel/basekit-laravel-ui
```

Include the CSS in your main CSS file:

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

### Include Alpine.js

[](#include-alpinejs)

Several Basekit components (Accordion, Dropdown Menu, Input password toggle, Modal, Multi-Select, Tabs, Toast, Tooltip, and Table) require Alpine.js. Add it to your layout:

```

```

Or with Livewire, use `@livewireScripts` which includes Alpine.js automatically:

```
@livewireScripts
```

See the [installation guide](https://basekit-laravel.github.io/basekit-laravel-ui/guide/installation.html) for more details.

### Advanced Setup

[](#advanced-setup)

Publish the configuration file:

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

Publish the CSS theme:

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

Build optimized CSS based on your configuration:

```
php artisan basekit:ui:build
```

For development, use watch mode:

```
php artisan basekit:ui:build --watch
```

---

🧩 Available Components
----------------------

[](#-available-components)

The package includes **33 components** organized into 6 categories.

### Form Components (8)

[](#form-components-8)

- [Button](https://basekit-laravel.github.io/basekit-laravel-ui/components/button.html)
- [Input](https://basekit-laravel.github.io/basekit-laravel-ui/components/input.html)
- [Textarea](https://basekit-laravel.github.io/basekit-laravel-ui/components/textarea.html)
- [Checkbox](https://basekit-laravel.github.io/basekit-laravel-ui/components/checkbox.html)
- [Radio](https://basekit-laravel.github.io/basekit-laravel-ui/components/radio.html)
- [Select](https://basekit-laravel.github.io/basekit-laravel-ui/components/select.html)
- [Multi‑Select](https://basekit-laravel.github.io/basekit-laravel-ui/components/multi-select.html)
- [Toggle](https://basekit-laravel.github.io/basekit-laravel-ui/components/toggle.html)

### Feedback Components (7)

[](#feedback-components-7)

- [Alert](https://basekit-laravel.github.io/basekit-laravel-ui/components/alert.html)
- [Toast](https://basekit-laravel.github.io/basekit-laravel-ui/components/toast.html)
- [Tooltip](https://basekit-laravel.github.io/basekit-laravel-ui/components/tooltip.html)
- [Progress](https://basekit-laravel.github.io/basekit-laravel-ui/components/progress.html)
- [Spinner](https://basekit-laravel.github.io/basekit-laravel-ui/components/spinner.html)
- [Skeleton](https://basekit-laravel.github.io/basekit-laravel-ui/components/skeleton.html)
- [Empty State](https://basekit-laravel.github.io/basekit-laravel-ui/components/empty-state.html)

### Navigation Components (5)

[](#navigation-components-5)

- [Breadcrumb](https://basekit-laravel.github.io/basekit-laravel-ui/components/breadcrumb.html)
- [Pagination](https://basekit-laravel.github.io/basekit-laravel-ui/components/pagination.html)
- [Tabs](https://basekit-laravel.github.io/basekit-laravel-ui/components/tabs.html)
- [Dropdown Menu](https://basekit-laravel.github.io/basekit-laravel-ui/components/dropdown-menu.html)
- [Link](https://basekit-laravel.github.io/basekit-laravel-ui/components/link.html)

### Layout Components (4)

[](#layout-components-4)

- [Stack](https://basekit-laravel.github.io/basekit-laravel-ui/components/stack.html)
- [Grid](https://basekit-laravel.github.io/basekit-laravel-ui/components/grid.html)
- [Container](https://basekit-laravel.github.io/basekit-laravel-ui/components/container.html)
- [Divider](https://basekit-laravel.github.io/basekit-laravel-ui/components/divider.html)

### Display Components (7)

[](#display-components-7)

- [Table](https://basekit-laravel.github.io/basekit-laravel-ui/components/table.html)
- [List](https://basekit-laravel.github.io/basekit-laravel-ui/components/list.html)
- [Description List](https://basekit-laravel.github.io/basekit-laravel-ui/components/description-list.html)
- [Stat](https://basekit-laravel.github.io/basekit-laravel-ui/components/stat.html)
- [Card](https://basekit-laravel.github.io/basekit-laravel-ui/components/card.html)
- [Badge](https://basekit-laravel.github.io/basekit-laravel-ui/components/badge.html)
- [Avatar](https://basekit-laravel.github.io/basekit-laravel-ui/components/avatar.html)

### Dialog & Overlay (2)

[](#dialog--overlay-2)

- [Modal](https://basekit-laravel.github.io/basekit-laravel-ui/components/modal.html)
- [Accordion](https://basekit-laravel.github.io/basekit-laravel-ui/components/accordion.html)

---

🧾 Example Form
--------------

[](#-example-form)

```

            Create Account

            @csrf

                        Already have an account?

                        Create Account

```

Browse all available components in the [style guide](https://basekit-laravel.github.io/basekit-laravel-ui/styleguide.html) and read the full docs at [basekit-laravel.github.io/basekit-laravel-ui](https://basekit-laravel.github.io/basekit-laravel-ui).

---

⚙️ Configuration
----------------

[](#️-configuration)

Edit `config/basekit-laravel-ui.php` to customize components:

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

    'icons' => [
        'style' => 'outline', // outline, solid, mini
    ],

    'build' => [
        'debounce_ms' => 500,
    ],
];
```

After changing configuration, rebuild CSS:

```
php artisan basekit:ui:build
```

For development, use watch mode:

```
php artisan basekit:ui:build --watch
```

---

🎨 Customization
---------------

[](#-customization)

### CSS Variables

[](#css-variables)

Override theme variables in your CSS:

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

See the full list of available variables in the [Complete CSS variable reference](https://basekit-laravel.github.io/basekit-laravel-ui/guide/theming.html#complete-css-variable-reference) in the documentation.

### Publishing Views

[](#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.

---

📐 Styling Conventions
---------------------

[](#-styling-conventions)

- Component CSS uses **BEM** with the `bk-` prefix (blocks, elements, and modifiers).
- Tailwind utilities are for **component usage** in Blade markup (layout, spacing, overrides).
- When combining classes, **Tailwind Merge** handles conflicts for the `class` attribute.

---

🧪 CI Quality Checks
-------------------

[](#-ci-quality-checks)

The CI workflow validates production readiness on pushes and pull requests by running:

- Feature tests: `php vendor/bin/pest --no-coverage`
- CSS build: `./vendor/bin/testbench basekit:ui:build`
- Styleguide generation: `./vendor/bin/testbench basekit:ui:styleguide`
- CSS/docs token sync guard: `bash tools/verify-doc-token-sync.sh`

You can run these locally before opening a pull request.

---

⚡ Performance
-------------

[](#-performance)

Component‑based builds can significantly reduce bundle size:

- Full bundle (all components): ~200KB
- Minimal config (3 components): ~55KB
- **Reduction: 73%**

---

🔄 Migration
-----------

[](#-migration)

See [CHANGELOG.md](CHANGELOG.md) for version changes and migration guides.

---

📚 Documentation
---------------

[](#-documentation)

Full documentation available at:

See also:

- [IMPLEMENTATION.md](IMPLEMENTATION.md) — Architecture and development guide
- [STRUCTURE.md](STRUCTURE.md) — Component organization and relationships

---

📄 License
---------

[](#-license)

The MIT License (MIT). Please see the [LICENSE](LICENSE) file for more information.

###  Health Score

45

—

FairBetter than 91% of packages

Maintenance99

Actively maintained with recent releases

Popularity6

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity56

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 55.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~6 days

Total

7

Last Release

9d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/31fe1d8a71e7dd17a24e52430616f823a6937c57e279555993cc9eaf9a976c82?d=identicon)[tgalfa](/maintainers/tgalfa)

---

Top Contributors

[![gergo-tar](https://avatars.githubusercontent.com/u/13517318?v=4)](https://github.com/gergo-tar "gergo-tar (19 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (9 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (6 commits)")

---

Tags

laraveluicomponentsbladeHeroiconstailwind

###  Code Quality

TestsPest

Static AnalysisPHPStan, Rector

Code StyleLaravel Pint

Type Coverage Yes

### Embed Badge

![Health badge](/badges/basekit-laravel-basekit-laravel-ui/health.svg)

```
[![Health](https://phpackages.com/badges/basekit-laravel-basekit-laravel-ui/health.svg)](https://phpackages.com/packages/basekit-laravel-basekit-laravel-ui)
```

###  Alternatives

[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k531.0k21](/packages/robsontenorio-mary)[moonshine/moonshine

Laravel administration panel

1.3k239.9k72](/packages/moonshine-moonshine)[psalm/plugin-laravel

Psalm plugin for Laravel

3325.1M337](/packages/psalm-plugin-laravel)[hasinhayder/tyro-dashboard

Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings

5222.7k](/packages/hasinhayder-tyro-dashboard)[hasinhayder/tyro-login

Tyro Login - Beautiful, customizable authentication views for Laravel 12 & 13

2443.7k5](/packages/hasinhayder-tyro-login)[developermithu/tallcraftui

TallCraftUI is a Laravel blade UI components library built on TALL stack

1652.9k](/packages/developermithu-tallcraftui)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)