PHPackages                             jono/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. jono/ui

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

jono/ui
=======

Reusable UI components for Laravel & Livewire

2.0.0(5mo ago)01MITBladePHP ^8.1

Since Jan 21Pushed 5mo agoCompare

[ Source](https://github.com/fatoniaridho/jono-ui)[ Packagist](https://packagist.org/packages/jono/ui)[ RSS](/packages/jono-ui/feed)WikiDiscussions main Synced today

READMEChangelog (2)Dependencies (2)Versions (3)Used By (0)

Jono UI
=======

[](#jono-ui)

Reusable UI component library for Laravel & Livewire.

Features
--------

[](#features)

- Plug & Play
- Livewire Ready
- Modern Design
- Alpine.js Powered
- Semantic Theming
- Modular

Quickstart
----------

[](#quickstart)

### 1. Installation

[](#1-installation)

```
composer require jono/ui
```

### 2. Configure Tailwind

[](#2-configure-tailwind)

Update tailwind.config.js:

```
import jonoPreset from './vendor/jono/ui/tailwind.preset.js'

export default {
    presets: [jonoPreset],
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './vendor/jono/ui/resources/views/**/*.blade.php',
    ],
}
```

### 3. Import Theme

[](#3-import-theme)

Add to CSS file:

```
@import '../../vendor/jono/ui/resources/css/jono-ui-theme.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
```

Changelog
---------

[](#changelog)

### v2.0.0

[](#v200)

- New Semantic Theming System
- New Components: Sidebar, Tabs, Menubar, Avatar, Badge, Spinner, Toaster, Toggle Group
- Automatic Dark Mode support
- Enhanced Button & Input styling

Components Usage
----------------

[](#components-usage)

### Sidebar Layout

[](#sidebar-layout)

```

        Logo

                    Dashboard

        Main Content

```

### Button

[](#button)

```
Save
Cancel
Delete
View
Process
```

### Input

[](#input)

```

    @

```

### Modal

[](#modal)

```

    Are you sure?

        Yes

```

### Dropdown

[](#dropdown)

```

        File

            New

            Exit

```

### Toaster

[](#toaster)

```

```

```
toast('Success', { description: 'Data saved.' })
```

Customizing Theme
-----------------

[](#customizing-theme)

Override CSS variables:

```
:root {
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --radius: 0.5rem;
}
```

License
-------

[](#license)

MIT License

###  Health Score

32

—

LowBetter than 69% of packages

Maintenance71

Regular maintenance activity

Popularity1

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity45

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

Every ~0 days

Total

2

Last Release

162d ago

Major Versions

1.1.0 → 2.0.02026-01-21

### Community

Maintainers

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

---

Top Contributors

[![ftn-ard](https://avatars.githubusercontent.com/u/100838982?v=4)](https://github.com/ftn-ard "ftn-ard (9 commits)")

### Embed Badge

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

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

###  Alternatives

[tallstackui/tallstackui

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

725172.4k14](/packages/tallstackui-tallstackui)[craftcms/cms

Craft CMS

3.6k3.6M3.1k](/packages/craftcms-cms)[moonshine/moonshine

Laravel administration panel

1.3k253.1k81](/packages/moonshine-moonshine)[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.

45444.2k1](/packages/pressbooks-pressbooks)[mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

447.9k](/packages/mati365-ckeditor5-livewire)[wendelladriel/slidewire

Create beautiful presentations powered by Livewire

1342.9k](/packages/wendelladriel-slidewire)

PHPackages © 2026

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