DOCSEARCHbyAlgolia
Submit Docs

maryUI Documentation

website·Indexed 33 days ago

https://mary-ui.com

A UI component library for Laravel 12+ and Livewire that relies on daisyUI and Tailwind CSS. It provides a wide range of components including tables, forms, charts, calendars, and a global search spotlight, along with a bootcamp for implementing authentication and user management.

Tokens
40.7K
Snippets
276
Records
292
Agent score
66%

What's inside maryUI

  1. Overview of Mary UI

    Mary UI is a library of gorgeous UI components specifically designed for Laravel Livewire. It is built on top of daisyUI and Tailwind CSS, allowing developers to build complex interfaces with minimal effort.

  2. Customize maryUI using daisyUI and Tailwind

    maryUI components are compatible with any configuration or CSS provided by daisyUI and Tailwind CSS. The recommended approach for applying global styles is to use the daisyUI theming system.

  3. Install maryUI in a Laravel project

    maryUI relies on daisyUI and Tailwind CSS for styling and does not ship its own custom CSS. To install maryUI, run the composer require command, execute the mary install artisan command, and start your frontend development server.
    composer require robsontenorio/mary

php artisan mary:install

yarn dev   # or `npm run dev`

  4. Use maryUI with Laravel Starter Kits (Breeze, Jetstream, FluxUI)

    When installing maryUI in a project that already uses a starter kit (such as Breeze, Jetstream, or FluxUI), the installer automatically publishes config/mary.php with a global prefix to prevent component name collisions. In these projects, you must use the prefixed component names (e.g., <x-mary-button>, <x-mary-card>, <x-mary-icon>).
    {{-- Example: Using maryUI input instead of starter kit inputs --}}
<x-mary-input label="Name" wire:model="name" />

  5. Implement global search with the Spotlight component

    The Spotlight component provides a UI for global search but does not index your site automatically. To make it functional, you must place the <x-spotlight /> tag in your main layout and create a backend search class. By default, this class should be App\Support\Spotlight and must contain a search method that returns a collection of results. Each result item must be an array containing name, description, and link. Optionally, you can include an avatar (image URL) or an icon (pre-rendered Blade icon).
    <body
    ... 
    <x-spotlight />
</body>
    namespace App\Support;

use Illuminate\Http\Request;

class Spotlight
{
    public function search(Request $request)
    {
        // Implement search logic here
        return collect([
            [
                'name' => 'Mary',
                'description' => 'Software Engineer',
                'link' => '/users/1',
                'avatar' => 'http://...'
            ]
        ]);
    }
}

  6. Migrate from Livewire Volt to native Livewire 4 class-based components

    Livewire 4 now provides native support for class-based components, making the use of Volt for this purpose redundant and potentially conflicting. If you are using class-based components with Volt, you should migrate them to native Livewire components and remove Volt from your project. Note that maryUI components themselves require no changes for this upgrade.
    // Before: views/pages/users/show.blade.php
use Livewire\Volt\Component;

new class extends Component {
    // ...
}

// After: views/pages/users/show.blade.php
use Livewire\Component;

new class extends Component {
    // ...
}

  7. Install dependencies for the Signature component

    The Signature component is a wrapper around the signature_pad library. To use it, you must include the signature_pad UMD build in your HTML head.
    <head>
    ...
    {{-- Signature Pad  --}}
    <script src="https://cdn.jsdelivr.net/npm/@szimek/signature_pad@4.1.1/dist/signature_pad.umd.min.js"></script>
</head>

  8. Create navigable rows in a table

    The link attribute allows making table cells clickable. You can use {token} placeholders that are replaced by the values of the keys defined in $headers.

    To disable links for specific columns, add 'disableLink' => true to that column's header configuration. You can also use Laravel's route() helper with [key] notation.

    {{-- Simple token replacement --}}
<x-table :headers="$headers" :rows="$users" link="/users/{id}" />

{{-- Using Laravel route helper --}}
<x-table :headers="$headers" :rows="$users" :link="route('users.show', ['username' => '[username]', 'id' => '[id]'])" />

{{-- Header config to disable link for a specific column --}}
$headers = [
    ['key' => 'city.name', 'label' => 'City', 'disableLink' => true],
];

  9. Install Ace Editor dependencies for Mary UI Code component

    The Mary UI Code component requires the Ace Editor library and its language tools extension to be included in the <head> of your document.
    <head>
    ...
    {{-- Ace Editor --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.39.1/ace.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.39.1/ext-language_tools.min.js"></script>
</head>

  10. Disable specific options in a Group

    To disable a specific option within a Group, include a disabled key set to true within the object in the options array.
    @php
    $users = [
        ['id' => 1, 'name' => 'John'],
        ['id' => 2, 'name' => 'Doe'],
        ['id' => 3, 'name' => 'Mary', 'disabled' => true],
        ['id' => 4, 'name' => 'Kate'],
    ];
@endphp

<x-group label="Select one" wire:model="selectedUser3" :options="$users" />

  11. Set up maryUI for local component development

    To develop or contribute new components to maryUI, clone the repository locally and link it via Composer to create a symlink in your project. This allows you to make changes to the package and see them reflected in your application immediately.
    # Clone the repository into your project root
git clone github.com:robsontenorio/mary.git packages/mary

# Add the local repository to composer config
composer config repositories.local '{"type": "path", "url": "packages/mary"}'

# Require the package again for local symlink
composer require robsontenorio/mary:@dev

# Start the dev server
yarn dev

  12. Install maryUI in a Laravel project

    maryUI relies on daisyUI and Tailwind CSS for styling. It does not ship with its own custom CSS, allowing users to override styles using daisyUI and Tailwind classes. To install maryUI, run the composer requirement and the installation command, then start your frontend development server.
    composer require robsontenorio/mary

php artisan mary:install

# Start dev server
yarn dev   # or `npm run dev`