Installation

How to install the project.

Requirements

To install this project, you need:

A Laravel 12 app
PHP 8.3 and above
Tailwind CSS (v4)
Alpine JS
A cool project idea

Installation

To set up the project:

Install the package using Composer

composer require yungifez/april-ui

In your CSS file, import the project's CSS file

app.css

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

In your JS file, import the project's Javascript file
app.js
```
import '/vendor/yungifez/april-ui/dist/april.js'
```
app.js
```
import '/vendor/yungifez/april-ui/dist/april.js'
```
Or you could use the blade directive
layout.blade.php
```
@aprilScripts
```
layout.blade.php
```
@aprilScripts
```

Test the setup was successful

index.blade.php

<april:button>Hello There Youtube!</april:button>

Upgrading from an earlier version? April UI used to need two repositories entries in your composer.json for a fork of tailwind-merge. You can delete them. The package now uses tales-from-a-dev/tailwind-merge-php, which comes straight from Packagist.

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,
[[replace:89f40014-e78c-4059-b4bc-e9e73a9c5077]]
<p>],

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.

Optional JavaScript entry points

The @aprilScripts directive is the easiest setup. If you manage your JavaScript bundle yourself, the package exposes separate entry points:

resources/js/app.js

import { registerApril } from 'april-ui/core'
import { registerLivewireBridge } from 'april-ui/livewire'
<p>document.addEventListener('alpine:init', () =&gt; {
registerApril(window.Alpine)
registerLivewireBridge(window.Alpine)
})

import { registerApril } from 'april-ui/core'
import { registerLivewireBridge } from 'april-ui/livewire'
<p>document.addEventListener('alpine:init', () =&gt; {
registerApril(window.Alpine)
registerLivewireBridge(window.Alpine)
})

The core bundle does not include the optional rich text editor. Add `@aprilEditorScripts` only to layouts that
render `<april:editor>`:
 
<x-code-block-wrapper title="layout.blade.php" language="blade">
    @verbatim
        @aprilScripts
        @aprilEditorScripts
    @endverbatim
</x-code-block-wrapper>
 
This keeps TipTap and its editor extensions out of pages that do not use the editor.

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.