PHPackages                             ynacorp/nova-swatches - 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. [Utility & Helpers](/categories/utility)
4. /
5. ynacorp/nova-swatches

ActiveLibrary[Utility & Helpers](/categories/utility)

ynacorp/nova-swatches
=====================

A beautiful color picking field for Laravel Nova.

v1.0.0(6y ago)22291.8k↑141.1%5[5 issues](https://github.com/ynacorp/nova-swatches/issues)[1 PRs](https://github.com/ynacorp/nova-swatches/pulls)1MITVuePHP >=7.1.0

Since Apr 2Pushed 4y ago2 watchersCompare

[ Source](https://github.com/ynacorp/nova-swatches)[ Packagist](https://packagist.org/packages/ynacorp/nova-swatches)[ RSS](/packages/ynacorp-nova-swatches/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (1)

Nova Swatches
=============

[](#nova-swatches)

A beautiful color picking field for Laravel Nova. Uses [vue-swatches](https://github.com/saintplay/vue-swatches).

Screenshots
-----------

[](#screenshots)

[![](docs/index.png)](docs/index.png) [![](docs/form-open.png)](docs/form-open.png)[![](docs/form-input.png)](docs/form-input.png) [![](docs/form-text-advanced.png)](docs/form-text-advanced.png)

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

[](#installation)

You can install the package into a Laravel application that uses Nova via composer:

```
composer require ynacorp/nova-swatches

```

Usage
-----

[](#usage)

Just use the `Swatches` field in your Nova resource:

```
namespace App\Nova;

use Yna\NovaSwatches\Swatches;

class Article extends Resource
{
    // ...

    public function fields(Request $request)
    {
        return [
            // ...

            Swatches::make('Color'),

            // ...
        ];
    }
}
```

Customization
-------------

[](#customization)

### Presets

[](#presets)

[vue-swatches](https://saintplay.github.io/vue-swatches/) provides a few color presets out of the box.

```
    public function fields(Request $request)
    {
        return [
            // ...

            // material-basic is a basic collection of material colors.
            Swatches::make('Color')->colors('material-basic'),

            // ...
        ];
    }
```

Try switching between `material-basic`, `text-basic`, `text-advanced`, `material-light` and `material-dark`.

If you're not satisfied with the presets, keep customizing as shown below.

### Palettes

[](#palettes)

You can also provide an array of colors for the user to pick from.

```
    public function fields(Request $request)
    {
        return [
            // ...

            // material-basic is a basic collection of material colors.
            Swatches::make('Color')->colors(['#ffffff', '#000']),

            // ...
        ];
    }
```

### Anything else...

[](#anything-else)

[vue-swatches](https://saintplay.github.io/vue-swatches/) is extremely customizable, you can pass an array of `props` directly to it:

```
    public function fields(Request $request)
    {
        return [
            // ...

            Swatches::make('Color')
                ->withProps([
                    'colors' => ["#4ae2c4", "#4fccff", "#41c84d"],
                    'show-fallback' => true,
                    'fallback-type' => 'input',
                    'popover-to' => 'left',

                    // More options at https://saintplay.github.io/vue-swatches/api/props.html
                ]),

            // ...
        ];
    }
```

Check out vue-swatches' [props section](https://saintplay.github.io/vue-swatches/api/props.html) for more options.

Configuration
-------------

[](#configuration)

While the `Swatches` component can be configured fluently, you can also set the defaults by publishing the package's config:

```
php artisan vendor:publish --tag=config --provider=Yna\\NovaSwatches\\FieldServiceProvider

```

Now edit file at the `config/nova/swatches.php` to customize the preferred defaults for your project:

```