PHPackages                             arkecosystem/ui - 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. [Templating & Views](/categories/templating)
4. /
5. arkecosystem/ui

AbandonedArchivedLibrary[Templating & Views](/categories/templating)

arkecosystem/ui
===============

User-Interface Scaffolding for Laravel. Powered by TailwindCSS.

5.0.0(4y ago)685.6k1[4 PRs](https://github.com/ArkEcosystemArchive/laravel-ui/pulls)3MITHTMLPHP ^8.0

Since Oct 15Pushed 4y ago3 watchersCompare

[ Source](https://github.com/ArkEcosystemArchive/laravel-ui)[ Packagist](https://packagist.org/packages/arkecosystem/ui)[ RSS](/packages/arkecosystem-ui/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (10)Dependencies (27)Versions (595)Used By (3)

Laravel UI
==========

[](#laravel-ui)

 [![](./banner.png)](./banner.png)

> User-Interface Scaffolding for Laravel. Powered by TailwindCSS.

[List of the available components](https://github.com/ArkEcosystem/laravel-ui#available-components)

Prerequisites
-------------

[](#prerequisites)

Since this package relies on a few 3rd party packages, you will need to have the following installed and configured in your project:

- [Alpinejs](https://github.com/alpinejs/alpine)
- [TailwindCSS](https://tailwindcss.com/)
- [TailwindUI](https://tailwindui.com/)
- [Livewire](https://laravel-livewire.com/)

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

[](#installation)

1. Require with composer: `composer require arkecosystem/ui`
2. Publish all the assets / views with `php artisan vendor:publish --provider="ARKEcosystem\UserInterface\UserInterfaceServiceProvider" --tag="css" --tag="fonts" --force`. If you need custom pagination, then also run `php artisan vendor:publish --provider="ARKEcosystem\UserInterface\UserInterfaceServiceProvider" --tag="pagination"`
3. Import the vendor css assets in your `app.css` file
4. Import the vendor `tailwind.config.js` file in your own tailwind config and build on top of that if you need additional changes
5. Use the components in your project with ``
6. Add the following snippet to your `webpack.mix.js` file to be able to use the `@ui` alias:

```
mix.webpackConfig({
        resolve: {
            alias: {
                '@ui': path.resolve(__dirname, 'vendor/arkecosystem/ui/resources/assets/')
            }
        }
    })
    ...
```

**Protip**: instead of running step 3 manually, you can add the following to your `post-autoload-dump` property in `composer.json`:

```
"post-autoload-dump": [
    "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
    "@php artisan package:discover --ansi",
    "@php artisan vendor:publish --provider=\"ARKEcosystem\\UserInterface\\UserInterfaceServiceProvider\" --tag=\"css\" --tag=\"fonts\""
],
```

**Protip**: you can publish individual assets by using their tag, e.g. `--tag="css"`, `--tag="images"`, etc

**Protip 2**: in order to lazy-load icons, you will need to publish them by using their tag, e.g. `--tag=\"icons\"`

### Navbar / Avatar Component

[](#navbar--avatar-component)

The navigation bar makes use of our own PHP implementation of [picasso](https://github.com/vechain/picasso) to generate a default avatar (in line with the Desktop Wallet). You will need to set this up in your project as follows:

1. Pass an `$identifier` value to the navbar component be used as seed for the generation of the image

### Clipboard

[](#clipboard)

1. Add clipboard to Laravel Mix config

```
.copy('vendor/arkecosystem/ui/resources/assets/js/clipboard.js', 'public/js/clipboard.js')
```

2. Add clipboard to any pages that need it

```
@push('scripts')

@endpush
```

3. Install `tippy.js`

```
yarn add tippy.js
```

4. Add the following snippet to your `resources/app.js`

```
window.initClipboard = () => {
    tippy('.clipboard', {
        trigger: 'click',
        content: (reference) => reference.getAttribute('tooltip-content'),
        onShow(instance) {
            setTimeout(() => {
                instance.hide();
            }, 3000);
        },
    });
}
```

### Modals

[](#modals)

1. Install `body-scroll-lock`

```
yarn add body-scroll-lock
```

2. Import the modal script in your `resources/js/app.js` file

```
import Modal from "@ui/js/modal";

window.Modal = Modal;
```

### WYSIWYG Markdown editor

[](#wysiwyg-markdown-editor)

1. Install the npm dependencies

```
yarn add @toast-ui/editor@^2.5.2 codemirror@^5.62.0
```

2. Ensure to import the markdown script inside the `` tag of your template.

```
@push('scripts')

@endpush
```

Assigning to the `window` object is now done in the markdown script itself, therefore there is no need to import and assign this script manually!

3. Configure webpack.mix with the markdown plugin

```
// Import the following script in the `webpack.mix.js` file
require('./vendor/arkecosystem/ui/laravel-mix/markdownPlugin.js');

// If the Tailwind Config file in your project is `tailwind.config.js`
// you dont need to pass any argument
mix.markdown('tailwind.app.config.js')
```

4. Add the markdown component to your form

```

```

5. You can change the height and the toolbar preset:

```

```

6. You can choose to limit the characters to be inserted:

```

```

Accepts `full` for all the plugins and `basic` for only text related buttons.

7. If you use the image upload plugin your page will need to have the csrf\_token in the metadata.

```

```

### Tags input

[](#tags-input)

1. Add taggle dependency `yarn add taggle` and ensure to copy the scripts to the public directory:

```
// webpack.mix.js file
    mix.copy('node_modules/taggle/dist/taggle.min.js', 'public/js/taggle.js')
```

2. Add the Tags script to the main js file

```
import Tags from "@ui/js/tags";

window.Tags = Tags;
```

3. Ensure to import the taggle scripts

```
@push('scripts')

@endpush
```

4. Use the component like the rest of the components. It accepts `tags` and `allowed-tags` props.

```

```

### User tagger input

[](#user-tagger-input)

1. Add tributejs dependency `yarn add tributejs` and ensure to copy the scripts to the public directory:

```
// webpack.mix.js file
    mix.copy('node_modules/tributejs/dist/tribute.min.js', 'public/js/tribute.js')
```

2. Import the user tagger script into the main js file and import the styles in your css file

```
import "@ui/js/user-tagger.js";
```

```
@import "../../vendor/arkecosystem/ui/resources/assets/css/_user_tagger.css";
```

3. Ensure to import the tributejs scripts in the places where the component will be used

```
@push('scripts')

@endpush
```

4. Use the component like you use the textarea input

```
{{ $body }}
```

5. This component makes a GET request to the `/api/users/autocomplete` endpoint with the query as `q`, that query should be used to search the users and should return them in the following format:

Note: You can change the the URL by using the `endpoint` prop.

```
[
    {
        "name":"Foo Bar",
        "username":"foo.bar",
        "avatar":"SVG AVATAR OR URL"
    },
    {
        "name":"Other user",
        "username":"user_name",
        "avatar":"SVG AVATAR OR URL"
    },
    ...
]
```

6. The component accepts a `usersInContext` prop that expects an array of usernames. These usernames will be sent in the search query request as `context` and can be used to show those users first in the response. Useful to show the user in the conversation first.

### Honeypot

[](#honeypot)

1. Install dependency

```
composer require lukeraymonddowning/honey
```

2. Setup honeypot

```
php artisan honey:install
```

3. Database Migration

```
php artisan migrate
```

#### Livewire modals

[](#livewire-modals)

To use the Livewire modals, use the `ARKEcosystem\UserInterface\Http\Livewire\Concerns\HasModal` trait in your component class. The trait adds the `closeModal` and `openModal` methods that toggle the `modalShown` property that is the one you should use to whether show or hide the modal.

**Important**: If you need to use a different variable to close the modal, or you can't make use of the trait for a reason, make sure to emit the `modalClosed` event as that is required for proper handling of the modals on the frontend! If you fail to emit this event, the browser window will not be scrollable after the modal disappears.

#### Alpine modals

[](#alpine-modals)

**Important**: for the modals to work properly, they expect a `nav` element inside a `header` element to be used for the header component. If you use the navbar from the UI lib (see `navbar.blade.php`) these elements are already used, but for custom navbars you may need to make adjustments.

There's a few ways you can make use of the new modals in conjunction with Alpine:

For JS-only modals, you need to use the `` component. You need to initiate the modal with a name (using the `name` attribute) and it can be opened by calling `Livewire.emit('openModal', 'name-of-my-modal')`

```

    @slot('description')
        My Description
    @endslot

Open modal
```

Alternatively, if you wrap the modal inside another Alpine component, you can use the `Modal.alpine()` method to init the modal (don't forget to call the `init` method on `x-init`).

The `Modal.alpine()` method accepts an object as the first argument. This object will be merged with the original Modal data.

Inside that component, you can use the `show()` method to show the modal:

```

    Show modal

        @slot('description')
            My Description
        @endslot

```

Note that it is also possible to hook into the lifecycle methods of the modal. You can override the `onBeforeHide`, `onBeforeShow`, `onHidden`, and `onShown` properties with custom methods if you require so.

```

    Show modal

        @slot('description')
            My Description
        @endslot

```

```
import Modal from "@ui/js/modal";

window.Modal = Modal;
```

### Tooltips

[](#tooltips)

1. Install `tippy.js`

```
yarn add tippy.js
```

2. Add to webpack mix

```
.js('vendor/arkecosystem/ui/resources/assets/js/tippy.js', 'public/js')
```

3. Add tippy to any pages that need it

```
@push('scripts')

@endpush
```

### Slider

[](#slider)

1. Install `swiper`

```
yarn add -D swiper
```

2. Add swiper to Laravel Mix config

```
.copy('node_modules/swiper/swiper-bundle.min.js', 'public/js/swiper.js')
```

3. Add swiper to any pages that need it

```
@push('scripts')

@endpush
```

4. Include swiper CSS

```
@import "../../node_modules/swiper/swiper-bundle.min.css";
```

5. Add the following to the `app.js` file:

```
import Slider from "@ui/js/slider";

window.Slider = Slider
```

### Date Picker

[](#date-picker)

1. Install `pikaday`

```
yarn add -D pikaday
```

2. Include pikaday CSS

```
@import "../../node_modules/pikaday/css/pikaday.css";
@import '../../vendor/arkecosystem/ui/resources/assets/css/_pikaday.css';
```

### Notifications Indicator

[](#notifications-indicator)

1. Add this to your user migration table

```
$table->timestamp('seen_notifications_at')->nullable();
```

2. Register the component in your LivewireServiceProvider file

```
use Domain\Components\NotificationsIndicator;
...
Livewire::component('notifications-indicator', NotificationsIndicator::class);
```

### Prism Codeblock

[](#prism-codeblock)

1. Add prism js to Laravel webpack mix

```
.js('vendor/arkecosystem/ui/resources/assets/js/prism.js', 'public/js')
```

2. Add prism to any pages that need it

```
@push('scripts')

@endpush
```

3. Include prism CSS

```
@import "../vendor/ark/_prism-theme.css";
```

4. Install `prism.js`

```
yarn add -D prism-themes prismjs
```

5. Add the following snippet to `resources/prism.js`

```
import "../vendor/ark/prism";

document.addEventListener("DOMContentLoaded", () => {
    document
        .querySelectorAll("pre")
        .forEach((pre) => useHighlight(pre, { omitLineNumbers: false }));
});
```

### Image Collection Sortable

[](#image-collection-sortable)

1. Install `Livewire Sortable`

```
yarn add -D livewire-sortable
```

2. Add the following snippet to your `resources/app.js`

```
import 'livewire-sortable'
// Or.
require('livewire-sortable')
```

3. Add `imagesReordered` method to handle index reordering when an image is sorted.

```
public function imagesReordered(array $ids): void
{
    Media::setNewOrder($ids);
}
```

4. Then, you can use `upload-image-collection` component with sortable functionality.

```

```

### Tabs

[](#tabs)

Add the following to the `app.js` file:

```
import "@ui/js/tabs.js";
```

```

    ...
    ...
    ...

```

For the available parameters, please refer to the [EXAMPLE.md](EXAMPLE.md#tabs)

### Error Pages

[](#error-pages)

There are also default error pages you can use for your Laravel project

1. Run `php artisan vendor:publish --provider="ARKEcosystem\UserInterface\UserInterfaceServiceProvider" --tag="error-pages"`
2. Add the following snippet to your `menus.php` lang file:

```
'error' => [
    '401' => '401 Unauthorized',
    '404' => '403 Forbidden',
    '404' => '404 Not Found',
    '419' => '419 Unauthorized',
    '429' => '429 Too Many Requests',
    '500' => '500 Internal Server Error',
    '503' => '503 Unavailable',
]
```

3. Please test if the pages work by manually going to a url that should throw an error

Available Components
--------------------

[](#available-components)

- ``
- ``
- ``
- ``
- ``
- ``
- ``
- [``](EXAMPLES.md#expandable)
- [``](EXAMPLES.md#input)
- ``
- ``
- ``
- ``
- ``
- ``
- ``
- ``
- [``](EXAMPLES.md#upload-single-image)
- [``](EXAMPLES.md#upload-multiple-images)
- [``](EXAMPLES.md#font-loader)
- [``](EXAMPLES.md#tabs)

> See the [example file](EXAMPLES.md) for more in-depth usage examples

### Livewire Pagination Scroll

[](#livewire-pagination-scroll)

1. Add the following to `app.js` file:

```
import "@ui/js/page-scroll";
```

2. Use the `HasPagination` trait on Livewire Components:

```
use ARKEcosystem\UserInterface\Http\Livewire\Concerns\HasPagination;

class Articles {
    use HasPagination;
}
```

3. Add event trigger at the bottom of the component template:

```

    ...

        window.addEventListener('livewire:load', () => window.livewire.on('pageChanged', () => scrollToQuery('#article-list')));

```

### Pagination

[](#pagination)

1. Publish the pagination assets

`php artisan vendor:publish --provider="ARKEcosystem\UserInterface\UserInterfaceServiceProvider" --tag="pagination"`

2. Add the following to the `app.js` file:

```
import Pagination from "@ui/js/pagination";

window.Pagination = Pagination
```

3. All set, now you can use the pagination component

```

```

### Footer

[](#footer)

Add the following snippet to your `urls.php` lang file:

```
'discord'  => 'https://discord.ark.io/',
'facebook' => 'https://facebook.ark.io/',
'github'   => 'https://github.com/ArkEcosystem',
'linkedin' => 'https://www.linkedin.com/company/ark-ecosystem',
'reddit'   => 'https://reddit.ark.io/',
'twitter'  => 'https://twitter.ark.io/',
'youtube'  => 'https://youtube.ark.io/',
```

Available Styles
----------------

[](#available-styles)

> It's advised to make use of the styles for generic components so we keep them similar throughout projects

- Buttons
- Tables
- Tabs

### In-progress

[](#in-progress)

- more styles, and proper configuration to define where styles are published

Blade Support
-------------

[](#blade-support)

### Avatar

[](#avatar)

In `config/app.php` under `aliases`, add the following entry:

```
'Avatar' => ARKEcosystem\UserInterface\Support\Avatar::class,

```

### Date Format

[](#date-format)

In `config/app.php` under `aliases`, add the following entry:

```
'DateFormat' => ARKEcosystem\UserInterface\Support\DateFormat::class,

```

### Format Read Time method for blade (generally used for blog date/time output)

[](#format-read-time-method-for-blade-generally-used-for-blog-datetime-output)

In `config/app.php` under `providers`, add the following entry:

```
ARKEcosystem\UserInterface\Providers\FormatReadTimeServiceProvider::class,

```

### SVG Lazy-Loading Icons

[](#svg-lazy-loading-icons)

In `config/app.php` under `providers`, add the following entry:

```
ARKEcosystem\UserInterface\Providers\SvgLazyServiceProvider::class,

```

This will initiate the `svgLazy` directive and allow you to load icons from the `arkecosystem/ui` package. For example:

```
@svgLazy('checkmark', 'w-5 h-5')

```

This will insert the following HTML:

```

```

**Protip**: You will need lazy.js in order for this to work

Development
-----------

[](#development)

If components require changes or if you want to create additional components, you can do so as follows:

### Vendor folder

[](#vendor-folder)

This approach is recommended to test out smaller changes. You can publish the views by running `php artisan vendor:publish --tag=views`, and they will show up in the `views/vendor/ark` folder. From there you can edit them to your liking and your project will make use of these modified files. Make sure to later commit them to this repository when you have made your changes to keep the files throughout projects in sync.

### Components Folder

[](#components-folder)

When you create a `views/components` folder, you can create new blade files inside it and they will automatically become available through `` to be used in your project. This way you can create new components, test them, and then copy them to the `arkecosystem/ui` repo when finished.

Afterwards you can add new components to the local package and use it in your project for testing.

### Icons

[](#icons)

If you need to add, replace or delete an icon:

- move the new icon in or remove it from `/resources/assets/icons`
- run `yarn run generate-icon-preview`
- open `icons.html` and check if the icon is present

Tailwind Configuration
----------------------

[](#tailwind-configuration)

There are a few tailwind configuration additions on which the components rely (e.g. colors and additional shadows) and are therefore expected to use the tailwind config in this repository as basis (you can import it and extend it further if needed).

###  Health Score

42

—

FairBetter than 90% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity33

Limited adoption so far

Community21

Small or concentrated contributor base

Maturity79

Established project with proven stability

 Bus Factor2

2 contributors hold 50%+ of commits

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

Every ~0 days

Total

586

Last Release

1692d ago

Major Versions

1.6.20 → 2.0.02021-02-03

2.40.0 → 3.0.02021-04-14

3.60.0 → 4.0.02021-09-27

4.0.4 → 5.0.02021-09-29

PHP version history (2 changes)1.2.0PHP ^7.4|^8.0

3.32.0PHP ^8.0

### Community

Maintainers

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

---

Top Contributors

[![alexbarnsley](https://avatars.githubusercontent.com/u/8069294?v=4)](https://github.com/alexbarnsley "alexbarnsley (212 commits)")[![alfonsobries](https://avatars.githubusercontent.com/u/17262776?v=4)](https://github.com/alfonsobries "alfonsobries (175 commits)")[![Highjhacker](https://avatars.githubusercontent.com/u/5347826?v=4)](https://github.com/Highjhacker "Highjhacker (76 commits)")[![leMaur](https://avatars.githubusercontent.com/u/2118799?v=4)](https://github.com/leMaur "leMaur (67 commits)")[![ItsANameToo](https://avatars.githubusercontent.com/u/35610748?v=4)](https://github.com/ItsANameToo "ItsANameToo (63 commits)")[![faustbrian](https://avatars.githubusercontent.com/u/22145591?v=4)](https://github.com/faustbrian "faustbrian (22 commits)")[![crnkovic](https://avatars.githubusercontent.com/u/6536260?v=4)](https://github.com/crnkovic "crnkovic (10 commits)")[![marianogoldman](https://avatars.githubusercontent.com/u/959563?v=4)](https://github.com/marianogoldman "marianogoldman (3 commits)")

###  Code Quality

TestsPest

Code StylePHP CS Fixer

### Embed Badge

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

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

###  Alternatives

[laravel/pulse

Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application.

1.7k12.1M99](/packages/laravel-pulse)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

703141.0k7](/packages/tallstackui-tallstackui)[pressbooks/pressbooks

Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS.

44643.1k1](/packages/pressbooks-pressbooks)[flarum/core

Delightfully simple forum software.

211.3M1.9k](/packages/flarum-core)[ralphjsmit/laravel-glide

Auto-magically generate responsive images from static image files.

4719.6k5](/packages/ralphjsmit-laravel-glide)

PHPackages © 2026

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