Phara UI v2.x
Login

Installation

Get started with Phara UI Kit in your Laravel Livewire project.

Requirements

Make sure your project meets the following requirements before installing.

PHP

8.1+

Laravel

10+

Livewire

4+

Alpine.js

3+
Installation

Install the package via Composer. The service provider is auto-discovered — no manual registration needed.

Bash 
composer require phara/ui-kit
Layout Setup

Add the required directives to your layout file. Place in the <head> and with before </body>.

Blade 
<head>
    <!-- ... -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    @uiStyles
</head>
<body>
    {{ $slot }}

    @livewireScripts
    @uiScripts
    @stack('scripts')
</body>

is required — components like Chart, Calendar, and Toast push scripts to this stack.

CSS Configuration

Add the following to your resources/css/app.css so Tailwind scans the package views and your primary color palette is wired up correctly.

CSS 
@import 'tailwindcss';

/* Scan Phara UI Kit views for utility classes */
@source '../../vendor/phara/ui-kit/resources/views/**/*.blade.php';

/* Enable class-based dark mode */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    /* Primary color palette — swap these vars to rebrand in one place */
    --color-primary-50:  var(--main-50,  #eff6ff);
    --color-primary-100: var(--main-100, #dbeafe);
    --color-primary-200: var(--main-200, #bfdbfe);
    --color-primary-300: var(--main-300, #93c5fd);
    --color-primary-400: var(--main-400, #60a5fa);
    --color-primary-500: var(--main-500, #3b82f6);
    --color-primary-600: var(--main-600, #2563eb);
    --color-primary-700: var(--main-700, #1d4ed8);
    --color-primary-800: var(--main-800, #1e40af);
    --color-primary-900: var(--main-900, #1e3a8a);
    --color-primary-950: var(--main-950, #172554);
}

@layer theme {
    .dark {
        /* Add dark-mode CSS variable overrides here */
    }
}

@source tells Tailwind to scan the package views so no utility classes are purged from the build.

@custom-variant dark enables class-based dark mode — add dark to your <html> tag to activate it.

@theme defines the primary-* color scale. Override --main-* CSS variables anywhere in your CSS to rebrand without touching the palette definition.

@layer theme is the right place for dark-mode variable overrides so they load at the correct cascade layer.

Alpine.js

Several components rely on Alpine.js for interactivity. If it's not already set up in your project, install and initialize it.

Bash 
npm install alpinejs

Then in your resources/js/app.js:

JavaScript 
import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();
Basic Usage

All components are available under the ui:: namespace. No additional imports needed.

Blade 
<x-ui::button variant="primary">Click me</x-ui::button>

<x-ui::button variant="primary" icon="check">Save</x-ui::button>

<x-ui::icon name="heart" variant="solid" />

<x-ui::input name="email" type="email" label="Email Address" placeholder="you@example.com" />