The power of Beartropy UI lies in its semantic preset system. You can drastically change the mood of your application—from a friendly Banking app to a strict SysAdmin panel—without rewriting your Blade views.

In this guide, we will walk through publishing the presets, creating two distinct themes, using "Magic Props", and setting global defaults.

Step 1: Publish the Presets

To start customizing, you need to publish the preset files to your application's resource folder. If you haven't done this already, run:

1php artisan vendor:publish --tag=beartropy-ui-presets

This will create the configuration files in resources/views/vendor/beartropy/ui/presets/. You will edit these files to add your custom themes.

Step 2: Define Your Themes

We will build two themes:

1. Banking: A mix of Indigo (Trust) and Emerald (Money).
2. SysAdmin: A high-contrast mix of Red (Caution) and Slate (Technical).

A. The Banking Theme

1. Buttons (Indigo) In presets/button.php:

1'banking' => [
2    'bg'    => 'bg-indigo-600 dark:bg-indigo-500',
3    'text'  => 'text-white',
4    'hover' => 'hover:bg-indigo-700 dark:hover:bg-indigo-600',
5    // ... other states
6],

2. Badges (Emerald) In presets/badge.php:

1'banking' => [
2    'bg'   => 'bg-emerald-100 dark:bg-emerald-900',
3    'text' => 'text-emerald-800 dark:text-emerald-100 border border-emerald-200',
4],

3. Inputs (Indigo Focus) In presets/input.php. Note the specific focus ring color:

1'banking' => [
2    'bg'     => 'bg-white dark:bg-gray-900',
3    'border' => 'border border-gray-300 dark:border-gray-700 shadow-sm',
4    'ring'   => 'focus-within:ring-2 focus-within:ring-indigo-500 focus-within:border-indigo-500',
5    'text'   => 'text-gray-900 dark:text-gray-100',
6    'label'  => 'font-semibold text-gray-700 dark:text-gray-300 text-sm mb-1 block',
7],

4. Cards (Indigo Accent) In presets/card.php. We add a thick top border:

1'banking' => [
2    'wrapper' => 'bg-white dark:bg-gray-800 rounded-xl border-t-4 border-t-indigo-500 border-x border-b border-gray-200 dark:border-gray-700 shadow-lg',
3    'title'   => 'text-xl font-bold text-gray-900 dark:text-white px-5 pt-5',
4    'footer'  => 'bg-gray-50 dark:bg-gray-900/40 border-t border-gray-100 px-5 py-4 rounded-b-xl',
5],

B. The SysAdmin Theme

1. Buttons (Red) In presets/button.php:

1'sysadmin' => [
2    'bg'    => 'bg-red-700 dark:bg-red-600',
3    'text'  => 'text-white',
4    'hover' => 'hover:bg-red-800 dark:hover:bg-red-700',
5],

2. Badges (Slate) In presets/badge.php:

1'sysadmin' => [
2    'bg'   => 'bg-slate-200 dark:bg-slate-700',
3    'text' => 'text-slate-700 dark:text-slate-200 border border-slate-300',
4],

3. Inputs (Red Focus & Mono Label) In presets/input.php. We use a monospaced font for labels to look more technical:

1'sysadmin' => [
2    'bg'     => 'bg-white dark:bg-gray-900',
3    'border' => 'border border-gray-400 dark:border-gray-600',
4    'ring'   => 'focus-within:ring-2 focus-within:ring-red-600 focus-within:border-red-600',
5    'label'  => 'font-mono text-slate-600 dark:text-slate-400 text-xs uppercase tracking-wide mb-1 block',
6],

4. Cards (Danger Zone) In presets/card.php. Less rounded corners (rounded-sm) and a red border:

1'sysadmin' => [
2    'wrapper' => 'bg-white dark:bg-gray-900 rounded-sm border-t-4 border-t-red-700 border border-gray-200 shadow-sm',
3    'title'   => 'text-lg font-mono font-bold text-gray-800 dark:text-gray-100 px-4 pt-4',
4],

Step 3: Usage with "Magic Props"

Beartropy UI supports magic boolean properties. Instead of writing color="banking", you can simply pass the preset name as an attribute.

The Banking View

 1<x-bt-card banking title="Account Overview">
 2    <div class="flex justify-between">
 3        <x-bt-badge banking>Active</x-bt-badge>
 4        <x-bt-button banking>Send Money</x-bt-button>
 5    </div>
 6 
 7    <div class="mt-4">
 8        <x-bt-input banking label="Amount" placeholder="0.00" />
 9    </div>
10</x-bt-card>

The SysAdmin View

 1<x-bt-card sysadmin title="SERVER_01 CONTROL">
 2    <div class="flex justify-between">
 3        <x-bt-badge sysadmin>Stopped</x-bt-badge>
 4        <x-bt-button sysadmin>Reboot System</x-bt-button>
 5    </div>
 6 
 7    <div class="mt-4">
 8        <x-bt-input sysadmin label="Root Password" type="password" />
 9    </div>
10</x-bt-card>

Step 4: Setting as Default (Optional)

If you want all your components to use the banking style by default (so you don't have to type the prop every time), you can configure this globally.

Option A: Using .env (Recommended)

Add the following lines to your .env file:

1BEARTROPY_UI_BUTTON_COLOR=banking
2BEARTROPY_UI_BADGE_COLOR=banking
3BEARTROPY_UI_INPUT_COLOR=banking
4BEARTROPY_UI_CARD_COLOR=banking

Option B: Editing Config

First, publish the configuration file if you haven't already:

1php artisan vendor:publish --tag=beartropy-ui-config

Then open config/beartropyui.php and update the component_defaults array:

1'component_defaults' => [
2    'button' => [
3        'color' => env('BEARTROPY_UI_BUTTON_COLOR', 'banking'), // Changed default
4        'size' => env('BEARTROPY_UI_BUTTON_SIZE', 'md'),
5    ],
6    // ... update other components as needed
7],

Now, <x-bt-button>Click Me</x-bt-button> will automatically render in Indigo (Banking style) without any extra attributes.