PHPackages                             phara/ui-kit - 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. [Utility & Helpers](/categories/utility)
4. /
5. phara/ui-kit

ActiveLibrary[Utility & Helpers](/categories/utility)

phara/ui-kit
============

Laravel Livewire UI Kit

1.0.0(2mo ago)04MITPHPPHP ^8.1

Since May 10Pushed 2mo agoCompare

[ Source](https://github.com/neangphara/phara-ui-kits)[ Packagist](https://packagist.org/packages/phara/ui-kit)[ RSS](/packages/phara-ui-kit/feed)WikiDiscussions main Synced 3w ago

READMEChangelogDependenciesVersions (2)Used By (0)

Phara UI Kit
============

[](#phara-ui-kit)

A Laravel Livewire UI component library with Heroicons integration, dark mode support, and Alpine.js-powered interactivity.

[![Latest Version on Packagist](https://camo.githubusercontent.com/0820877ccb8271c711bca362234524df8549b41e568736aac10c02e0f0f3eba8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f70686172612f75692d6b69742e737667)](https://packagist.org/packages/phara/ui-kit)[![License](https://camo.githubusercontent.com/2d54b566eb348be1b75e0ab705e09d266ba9572b8cc7292afe89f67277c55027/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f70686172612f75692d6b69742e737667)](https://packagist.org/packages/phara/ui-kit)

Requirements
------------

[](#requirements)

- PHP 8.1+
- Laravel 10+
- Livewire 4+
- Alpine.js 3+

Installation
------------

[](#installation)

Install the package via Composer:

```
composer require phara/ui-kit
```

The service provider is auto-discovered by Laravel — no manual registration needed.

### Layout Setup

[](#layout-setup)

Add `@uiStyles` in the `` and `@uiScripts` before `` in your layout file:

```

    {{-- ... --}}
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    @uiStyles

    {{ $slot }}

    @livewireScripts
    @uiScripts
    @stack('scripts')

```

> `@stack('scripts')` is required — components like Chart, Calendar, and Toast push scripts to this stack.

### Alpine.js Setup

[](#alpinejs-setup)

If Alpine.js is not already installed:

```
npm install alpinejs
```

Then in your `resources/js/app.js`:

```
import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();
```

Usage
-----

[](#usage)

All components are available under the `ui::` namespace:

```
Click me

```

---

Components
----------

[](#components)

### Button

[](#button)

```
Click me

Save

Next

Dashboard
```

PropValuesDefault`variant``primary`, `secondary`, `danger`, `outline`, `ghost``primary``size``sm`, `md`, `lg``md``icon`Any Heroicon name—`iconPosition``left`, `right``left``href`URL string—---

### Icon

[](#icon)

All 324 Heroicons are included out of the box.

```

```

PropValuesDefault`name`Any [Heroicon](https://heroicons.com) namerequired`variant``outline`, `solid``outline``size``xs`, `sm`, `md`, `lg`, `xl``md`---

### Input

[](#input)

```

```

PropValuesDefault`name`stringrequired`label`string—`type``text`, `email`, `password`, `search`, etc.`text``size``sm`, `md`, `lg``md``variant``default`, `filled``default``icon`Any Heroicon name—**Smart behaviors:**

- `type="search"` — shows a clear (×) button when the field has a value
- `type="password"` — shows an eye icon to toggle visibility
- `readonly` — shows a copy-to-clipboard button automatically

---

### Copy to Clipboard

[](#copy-to-clipboard)

```

    Copy Install Command

    Copy Key

```

PropValuesDefault`text`string—`style``button`, `icon``button``variant``default`, `primary`, `ghost`, `outline``default``size``sm`, `md`, `lg``md``successMessage`string`Copied!``icon`Heroicon name`clipboard-document``successIcon`Heroicon name`check`---

### Theme Toggle

[](#theme-toggle)

```

```

PropValuesDefault`style``button`, `toggle``button``size``sm`, `md`, `lg``md`Automatically detects system preference on first load and persists the user's choice in `localStorage`.

---

Dark Mode
---------

[](#dark-mode)

All components support dark mode out of the box. No extra configuration needed.

Icons Reference
---------------

[](#icons-reference)

Browse all available icons at [heroicons.com](https://heroicons.com). Use the icon name directly in any `icon` prop:

```

```

License
-------

[](#license)

MIT

###  Health Score

36

—

LowBetter than 79% of packages

Maintenance85

Actively maintained with recent releases

Popularity3

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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

Unknown

Total

1

Last Release

75d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/b6411adbab730140dec05a1f4566f37916d6b5b055a2dc9ac739ba71fa3a00b7?d=identicon)[neangphara](/maintainers/neangphara)

---

Top Contributors

[![neangphara](https://avatars.githubusercontent.com/u/78836703?v=4)](https://github.com/neangphara "neangphara (5 commits)")

### Embed Badge

![Health badge](/badges/phara-ui-kit/health.svg)

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

###  Alternatives

[anthonybudd/wp_route

1041.9k](/packages/anthonybudd-wp-route)[stubbles/core

103.4k1](/packages/stubbles-core)

PHPackages © 2026

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