Download the PHP package phara/ui-kit without Composer
On this page you can find all versions of the php package phara/ui-kit. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package ui-kit
Phara UI Kit
A Laravel Livewire UI component library with Heroicons integration, dark mode support, and Alpine.js-powered interactivity.
Requirements
- PHP 8.1+
- Laravel 10+
- Livewire 4+
- Alpine.js 3+
Installation
Install the package via Composer:
The service provider is auto-discovered by Laravel — no manual registration needed.
Layout Setup
Add @uiStyles in the <head> and @uiScripts before </body> in your layout file:
@stack('scripts')is required — components like Chart, Calendar, and Toast push scripts to this stack.
Alpine.js Setup
If Alpine.js is not already installed:
Then in your resources/js/app.js:
Usage
All components are available under the ui:: namespace:
Components
Button
| Prop | Values | Default |
|---|---|---|
variant |
primary, secondary, danger, outline, ghost |
primary |
size |
sm, md, lg |
md |
icon |
Any Heroicon name | — |
iconPosition |
left, right |
left |
href |
URL string | — |
Icon
All 324 Heroicons are included out of the box.
| Prop | Values | Default |
|---|---|---|
name |
Any Heroicon name | required |
variant |
outline, solid |
outline |
size |
xs, sm, md, lg, xl |
md |
Input
| Prop | Values | Default |
|---|---|---|
name |
string | required |
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 valuetype="password"— shows an eye icon to toggle visibilityreadonly— shows a copy-to-clipboard button automatically
Copy to Clipboard
| Prop | Values | Default |
|---|---|---|
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
| Prop | Values | Default |
|---|---|---|
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
All components support dark mode out of the box. No extra configuration needed.
Icons Reference
Browse all available icons at heroicons.com. Use the icon name directly in any icon prop:
License
MIT