PHPackages                             blissjaspis/myui - 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. blissjaspis/myui

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

blissjaspis/myui
================

Myui is a package for Laravel that provides a set of pre-built UI components and utilities to help you build modern and responsive web applications

1.1.1(5mo ago)059↓25%MITBladePHP ^8.2|^8.3|^8.4

Since Sep 3Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/blissjaspis/myui)[ Packagist](https://packagist.org/packages/blissjaspis/myui)[ Docs](https://github.com/blissjaspis/myui)[ RSS](/packages/blissjaspis-myui/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (3)Dependencies (4)Versions (12)Used By (0)

Myui
====

[](#myui)

Myui is a package for Laravel that provides a set of pre-built UI components and utilities to help you build modern and responsive web applications.

> **Latest Updates:** This package now only supports **TailwindCSS v4**. If you need to customize the components, feel free to modify them directly in your application.

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

[](#installation)

You can install the package via composer:

```
composer require blissjaspis/myui
```

Publish the configuration file (optional):

```
php artisan vendor:publish --provider="BlissJaspis\Myui\Providers\MyuiServiceProvider" --tag=myui-config
```

### Include Myui theme tokens and base styles

[](#include-myui-theme-tokens-and-base-styles)

Myui components use shadcn-style theme tokens such as `bg-background`, `text-foreground`, `border-input`, and `ring-ring`. In your app CSS, import Tailwind and Myui CSS directly from the package, then add Tailwind source scanning for the components you use:

```
@import "tailwindcss";
@import "../../vendor/blissjaspis/myui/resources/css/myui.css";

@source "../../vendor/blissjaspis/myui/resources/views/components/*.blade.php";
```

If your app already has its own global design tokens, you can scope Myui styles by wrapping your UI in:

```

```

For dark mode, use one of these:

- Global dark mode: add `.dark` on `` or ``.
- Scoped dark mode: add `.dark` to the wrapper (``) or place wrapper inside a dark parent (`...`).

Optional: Tailwind scan optimization
------------------------------------

[](#optional-tailwind-scan-optimization)

To optimize CSS output, point `@source` to specific component files or directories you actually use:

```
@source "../../vendor/blissjaspis/myui/resources/views/components/button/**/*.blade.php";
@source "../../vendor/blissjaspis/myui/resources/views/components/input/**/*.blade.php";
```

Blaze Optimization Configuration
--------------------------------

[](#blaze-optimization-configuration)

Myui uses [Blaze](https://github.com/livewire/blaze) under the hood to provide high-performance Blade component rendering. Blaze compiles templates into optimized PHP functions, eliminating 91-97% of rendering overhead.

> **Important:** By installing this package, you can indirectly configure all your Blaze settings via `config/myui.php`. However, keep in mind that **uninstalling this package will erase all Blaze configurations**, so be careful.
>
> - If you're new to Blaze and are using this package for the first time (instead of installing Blaze separately), configuring Blaze through `myui.php` is the recommended approach.
> - If Blaze was already installed globally before this package, your global Blaze configuration will take precedence, and settings in `myui.php` (like `enabled`, `debug`, `throw_exceptions`) will be ignored. Myui will only configure directory-level optimizations.

### How It Works

[](#how-it-works)

Myui automatically detects how Blaze is configured in your application:

ScenarioMyui Behavior**Blaze installed globally** (`livewire/blaze` in your composer.json)Myui only configures **directory optimizations** (see below). You control global settings (`BLAZE_ENABLED`, `BLAZE_DEBUG`) in your app.**Blaze not installed globally**Myui manages Blaze entirely, using settings from `config/myui.php`.### Non-Global Blaze Users

[](#non-global-blaze-users)

If you haven't installed Blaze separately, Myui manages everything. Configure via:

```
MYUI_BLAZE_ENABLED=true
MYUI_BLAZE_DEBUG=false
MYUI_BLAZE_THROW_EXCEPTIONS=false
```

Or in `config/myui.php`:

```
'blaze' => [
    'enabled' => true,
    'debug' => false,
    'throw_exceptions' => false,
    // ... directory configuration
],
```

### Optimization Strategies

[](#optimization-strategies)

StrategyDescriptionBest For**Compile** (default)Compiles to optimized PHP functionsGeneral use**Fold**Pre-renders to static HTML at compile timeStatic components (icons, badges)**Memo**Caches repeated renders at runtimeRepeated components (avatars, status icons)### Path Resolution

[](#path-resolution)

Myui config uses a special path syntax that works correctly even after publishing:

SyntaxResolves To`'package'` or `null``vendor/blissjaspis/myui/resources/views/components``'package:icons'``vendor/blissjaspis/myui/resources/views/components/icons``'package:badge'``vendor/blissjaspis/myui/resources/views/components/badge``resource_path('views/components')`Your app's components directory**Examples:**

```
'directories' => [
    // Optimize all Myui package components
    [
        'path' => 'package',
        'compile' => true,
        'fold' => false,
        'memo' => false,
    ],

    // Optimize Myui icons with memoization
    [
        'path' => 'package:icons',
        'compile' => true,
        'memo' => true,
    ],

    // Optimize your app's custom components
    [
        'path' => resource_path('views/components/loading'),
        'compile' => true,
        'fold' => true,
    ],
],

'excluded' => [
    // Exclude Myui legacy components
    'package:legacy',

    // Exclude your app's custom path
    resource_path('views/components/debug'),
],
```

### Component-Level Optimization

[](#component-level-optimization)

You can also use the `@blaze` directive directly in component templates:

```
{{-- Default: use compile strategy --}}
@blaze

{{-- Enable folding (static components only) --}}
@blaze(fold: true)

{{-- Enable memoization (components without slots) --}}
@blaze(memo: true)

{{-- Mark safe props for folding --}}
@blaze(fold: true, safe: ['color', 'size'])
```

> **Note:** After changing configuration, always clear compiled views:
>
> ```
> php artisan view:clear
> ```

Usage
-----

[](#usage)

### Component Syntax

[](#component-syntax)

Myui uses the `x-myui::` prefix for all components.

```

        Card Title
        Card description

        Click me!

```

### Available Components

[](#available-components)

#### Layout & Structure

[](#layout--structure)

- [Accordion](docs/components/accordion.md) - Collapsible content sections
- [Card](docs/components/card.md) - Container with header, content, and footer
- [Navbar](docs/components/navbar.md) - Navigation header component
- [Sheet](docs/components/sheet.md) - Slide-out panel from screen edges
- [Separator](docs/components/separator.md) - Visual divider between content
- [Tabs](docs/components/tabs.md) - Tabbed interface
- [Tab Links](docs/components/tab-links.md) - URL-based tab navigation

#### Forms & Input

[](#forms--input)

- [Button](docs/components/button.md) - Interactive button element
- [Button Group](docs/components/button-group.md) - Group related buttons together
- [Checkbox](docs/components/checkbox.md) - Binary choice input
- [Form](docs/components/form.md) - Form wrapper with validation
- [Input](docs/components/input.md) - Text input field
- [Label](docs/components/label.md) - Form field label
- [Radio Group](docs/components/radio-group.md) - Single choice from multiple options
- [Select](docs/components/select.md) - Dropdown selection
    - [Basic](docs/components/select-basic.md) - Simple dropdown
    - [Multiple](docs/components/select-multiple.md) - Multi-select dropdown
    - [Search DB](docs/components/select-search-db.md) - Searchable database dropdown
- [Switch](docs/components/switch.md) - Toggle switch
- [Textarea](docs/components/textarea.md) - Multi-line text input

#### Feedback & Display

[](#feedback--display)

- [Alert](docs/components/alert.md) - Status message banners
- [Avatar](docs/components/avatar.md) - User profile images with fallback
- [Badge](docs/components/badge.md) - Small status indicators
- [Dialog](docs/components/dialog.md) - Modal dialog windows
- [Dropdown Menu](docs/components/dropdown.md) - Contextual menu with actions
- [Popover](docs/components/popover.md) - Floating content panel
- [Sonner](docs/components/sonner.md) - Toast notifications
- [Tooltip](docs/components/tooltip.md) - Hover information popup

#### Navigation & Content

[](#navigation--content)

- [Breadcrumb](docs/components/breadcrumb.md) - Navigation path indicator
- [Link](docs/components/link.md) - Styled anchor elements
- [Table](docs/components/table.md) - Data table component
- [Typography](docs/components/typography.md) - Text styling helpers

#### Icons

[](#icons)

- [Icons](docs/components/icons.md) - Collection of SVG icon components

#### AI/LLM Components

[](#aillm-components)

- [LLM](docs/components/llm.md) - AI/LLM chat interface components

For detailed documentation on each component, please refer to the markdown files in the `docs/components/` directory.

Contributing
------------

[](#contributing)

Contributions are welcome! Please feel free to submit a Pull Request.

License
-------

[](#license)

The MIT License (MIT). Please see [License](LICENSE) for more information.

###  Health Score

42

—

FairBetter than 90% of packages

Maintenance81

Actively maintained with recent releases

Popularity10

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity60

Established project with proven stability

 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 ~18 days

Recently: every ~2 days

Total

11

Last Release

62d ago

Major Versions

1.1.1 → 2.0.0-beta.12026-02-25

### Community

Maintainers

![](https://www.gravatar.com/avatar/6c5c90080275353d1e65fc2655c85684598235849d2d4f98bef82f597cec5c6e?d=identicon)[jaspis](/maintainers/jaspis)

---

Top Contributors

[![blissjaspis](https://avatars.githubusercontent.com/u/19877298?v=4)](https://github.com/blissjaspis "blissjaspis (86 commits)")

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/blissjaspis-myui/health.svg)

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

###  Alternatives

[rcrowe/twigbridge

Adds the power of Twig to Laravel

9105.9M50](/packages/rcrowe-twigbridge)[tightenco/jigsaw

Simple static sites with Laravel's Blade.

2.2k438.5k29](/packages/tightenco-jigsaw)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

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

Laravel administration panel

1.3k217.1k59](/packages/moonshine-moonshine)[livewire/blaze

A tool for optimizing Blade component performance by folding them into parent templates

688221.3k17](/packages/livewire-blaze)[tallstackui/tallstackui

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

703141.0k7](/packages/tallstackui-tallstackui)

PHPackages © 2026

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