Styling

Corepine Emoji keeps the public styling API on the Blade component so each picker can be shaped for its context.

Panel Classes

Classes passed to <x-corepine.emoji /> are applied to the visible picker panel:

<x-corepine.emoji
    class="h-[500px] w-[420px] rounded-xl"
/>

Use this for height, width, radius, shadows, borders, and app-specific panel styling.

Grid Columns

Use columns="auto" when the picker width should decide how many emoji fit per row:

<x-corepine.emoji
    columns="auto"
    class="w-44 rounded-xl"
/>

The panel width stays on the picker panel. The emoji grid wraps into as many columns as the current width can hold.

Grid column utilities passed through class are moved to the emoji grids:

<x-corepine.emoji
    class="w-[500px] rounded-xl grid-cols-4 sm:grid-cols-9"
/>

This renders the panel with w-[500px] rounded-xl and renders each emoji grid with grid grid-cols-4 sm:grid-cols-9.

This keeps responsive column control close to the picker instance without adding separate props for every breakpoint.

Columns Prop

Use :columns when you want a simple fixed column count:

<x-corepine.emoji
    :trigger="false"
    :columns="4"
/>

The :columns prop sets the picker grid through a CSS variable. columns="auto" switches the grid to width-based wrapping. If grid column utilities are passed in class, those utilities take over the grid layout.

Color

Set the app-wide highlight color in config/corepine-emoji.php:

'color' => 'red',

Override a single picker with the Blade prop:

<x-corepine.emoji color="blue" />

The color is applied through CSS variables, so the trigger highlight, search border, category indicator, and reaction picker accents stay in sync.

Color names are resolved through Corepine Support, including built-in palettes and registered aliases.

Config Default

Set the default column count in config/corepine-emoji.php:

'columns' => 8,

Use auto as the default when picker width should drive the grid:

'columns' => 'auto',

Use config for the app-wide default and Blade classes for one-off responsive layouts.

Wrapper Classes

Use wrapper-class when the outer wrapper needs layout classes:

<x-corepine.emoji
    wrapper-class="ml-auto"
    class="w-[420px] rounded-xl grid-cols-4 sm:grid-cols-8"
/>

The wrapper contains the trigger and popover. Most visual customization belongs on class, not wrapper-class.