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

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. 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 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.