Installation

Start a new Laravel app with a starter kit, or add April UI to an app you already have.

The fastest way to start is a starter kit. You get a new Laravel app with April UI, Tailwind, Alpine, authentication, and an application shell already in place. If you already have an app, you can add April UI by hand in a few steps.

Start with a starter kit

Pick the kit that matches how you build. Use the Blade kit for controllers, forms, and server-rendered views:

Blade 
laravel new my-app --using=yungifez/april-ui-blade-starter-kit

Use the Livewire kit for Livewire page components:

Livewire 
laravel new my-app --using=yungifez/april-ui-starter-kit

Then start the app:

cd my-app
composer dev

That's it. See Starter kits for what each kit includes.

Add to an existing app

Your app needs:

  • Laravel 12 or 13
  • PHP 8.3 or later
  • Tailwind CSS 4
  • Alpine.js. Livewire already includes it.

1. Install the package

composer require yungifez/april-ui

2. Import the styles

Import April UI after Tailwind in your CSS file. April UI tells Tailwind where its views are, so you do not need to add a @source line.

resources/css/app.css 
@import "tailwindcss";
@import "../../vendor/yungifez/april-ui/resources/css/april.css";

3. Load the scripts

Add @aprilScripts to the <head> of your layout. It registers April UI with Alpine before Alpine starts.

resources/views/components/layouts/app.blade.php 
@aprilScripts

The rich text editor ships separately, so pages without it stay light. Add @aprilEditorScripts only to layouts that render <april:editor>:

resources/views/components/layouts/app.blade.php 
@aprilScripts
<p>

To put April UI in your own bundle instead, see Bundle the scripts yourself below.

4. Try a component

resources/views/welcome.blade.php 
<april:button>Hello, April</april:button>

Run npm run dev and open the page. You should see a styled button.

Bundle the scripts yourself

Use this when you want April UI in your own Vite bundle instead of @aprilScripts. Import the core entry point from the Composer package and register it when Alpine initializes:

resources/js/app.js 
import { registerApril, registerLivewireBridge } from '../../vendor/yungifez/april-ui/resources/js/april-core.js'
 
document.addEventListener('alpine:init', () => {
    registerApril(window.Alpine)
    registerLivewireBridge(window.Alpine)
})

Configuration

The package works without any config. If you use a custom Tailwind setup, publish the config file:

php artisan vendor:publish --tag=april-ui-config

The tailwind_merge section controls how a component merges its own classes with the classes you pass to it:

config/april-ui.php 
'tailwind_merge' => [
    // The prefix of your Tailwind classes, if you use one.
    'prefix' => null,
 
    // Number of merge results to keep in memory. Set to 0 to disable.
    'cacheSize' => 500,
 
    // Extra class groups, for a custom Tailwind value that does not merge correctly.
    'classGroups' => [],
],

Package views and publishing

April UI uses the package views by default. This keeps upgrades simple and follows Laravel's package conventions.

List the available components and their dependencies:

php artisan april:list

If you need to change a component, publish it to Laravel's normal vendor override path:

php artisan april:publish button

The published file is copied to resources/views/vendor/april/components/button.blade.php. Laravel loads this copy before the package view. Publish every component with php artisan april:publish --all.

Review published components against the package version with:

php artisan april:update --diff

Use --dry-run to inspect changes without writing files. Use php artisan april:doctor to find common Blade issues, such as a typeless button inside a form.

MCP server

April UI includes a local MCP server for component discovery and publishing. Add it to the project's MCP client configuration with:

php artisan april:mcp:install

The installer adds an april-ui server to .mcp.json and preserves an existing laravel-boost server. For Codex, use --codex to update the project-scoped .codex/config.toml instead:

php artisan april:mcp:install --codex

You can also pass --config=path/to/mcp.json when your client stores its configuration elsewhere. A .toml path is handled as a Codex configuration. Restart Codex after changing its configuration. The generated server entry starts April UI over standard input and output:

{
  "command": "php",
  "args": ["artisan", "april:mcp"]
}

The server can list, search, and publish components. Publishing still writes to Laravel's normal resources/views/vendor/april/components path.