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

[ipinfo/ipinfo

The official PHP library for IPinfo, the most reliable, accurate, and in-depth source of IP address data available anywhere. We process terabytes of data to produce our custom IP geolocation, company, carrier and IP type data sets. Visit our developer docs at https://ipinfo.io/developers.

2901.3M20](/packages/ipinfo-ipinfo)[alibabacloud/dysmsapi-20170525

Alibaba Cloud Dysmsapi (20170525) SDK Library for PHP

13449.4k44](/packages/alibabacloud-dysmsapi-20170525)[rlofls/drag-captcha

Drag-and-drop graphics verification, small and easy to use

511.9k](/packages/rlofls-drag-captcha)

PHPackages © 2026

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