README

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

You can install the package via composer:

composer require blissjaspis/myui

Publish Myui CSS assets (recommended):

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

For your application to use the Myui components, you must configure Tailwind CSS v4 to scan the package's views:

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

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 addition to Tailwind scanning, publish assets and import the published stylesheet in your app CSS:

@import "tailwindcss";
@import "./vendor/myui.css";

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

<div class="myui-theme">
    <!-- Myui components -->
</div>

For dark mode, use one of these:

Global dark mode: add .dark on <html> or <body>.
Scoped dark mode: add .dark to the wrapper (<div class="myui-theme dark">) or place wrapper inside a dark parent (<div class="dark"><div class="myui-theme">...</div></div>).

Optimization (Tree Shaking)

By default, the configuration above scans all Myui components. To optimize your CSS size by only including the styles for the components you actually use, you can specify the specific directories for those components instead of scanning the entire package:

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

Usage

Component Syntax

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

<x-myui::card>
    <x-myui::card.header>
        <x-myui::card.title>Card Title</x-myui::card.title>
        <x-myui::card.description>Card description</x-myui::card.description>
    </x-myui::card.header>
    <x-myui::card.content>
        <x-myui::button>Click me!</x-myui::button>
    </x-myui::card.content>
</x-myui::card>

Available Components

Layout & Structure

Accordion - Collapsible content sections
Card - Container with header, content, and footer
Navbar - Navigation header component
Sheet - Slide-out panel from screen edges
Separator - Visual divider between content
Tabs - Tabbed interface
Tab Links - URL-based tab navigation

Forms & Input

Button - Interactive button element
Button Group - Group related buttons together
Checkbox - Binary choice input
Form - Form wrapper with validation
Input - Text input field
Label - Form field label
Radio Group - Single choice from multiple options
Select - Dropdown selection
- Basic - Simple dropdown
- Multiple - Multi-select dropdown
- Search DB - Searchable database dropdown
Switch - Toggle switch
Textarea - Multi-line text input

Feedback & Display

Alert - Status message banners
Badge - Small status indicators
Dialog - Modal dialog windows
Dropdown Menu - Contextual menu with actions
Popover - Floating content panel
Sonner - Toast notifications
Tooltip - Hover information popup

Navigation & Content

Breadcrumb - Navigation path indicator
Link - Styled anchor elements
Table - Data table component
Typography - Text styling helpers

AI/LLM Components

LLM - AI/LLM chat interface components

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

Contributing

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

License

The MIT License (MIT). Please see License for more information.

blissjaspis / myui

Maintainers

Details