What Are Presets?

Presets are PHP files that define all visual styles for a component: colors, borders, backgrounds, labels, and more.

How it works

Each component reads its preset file at render time. The preset returns an array of Tailwind CSS classes organized by color name. To customize a component, publish its preset and edit the classes — the component picks up changes automatically.

Publishing Presets

Publish all presets

Publishes all preset files to your project. You can then edit any preset freely.

1php artisan vendor:publish --provider="Beartropy\Ui\BeartropyUiServiceProvider" --tag="beartropy-ui-presets"

Publish a single component preset

Publish only the preset for the component you want to customize:

 1php artisan vendor:publish --tag=beartropyui-preset-input
 2php artisan vendor:publish --tag=beartropyui-preset-button
 3php artisan vendor:publish --tag=beartropyui-preset-select
 4php artisan vendor:publish --tag=beartropyui-preset-textarea
 5php artisan vendor:publish --tag=beartropyui-preset-checkbox
 6php artisan vendor:publish --tag=beartropyui-preset-radio
 7php artisan vendor:publish --tag=beartropyui-preset-toggle
 8php artisan vendor:publish --tag=beartropyui-preset-alert
 9php artisan vendor:publish --tag=beartropyui-preset-badge
10php artisan vendor:publish --tag=beartropyui-preset-card
11php artisan vendor:publish --tag=beartropyui-preset-dropdown
12php artisan vendor:publish --tag=beartropyui-preset-table
13php artisan vendor:publish --tag=beartropyui-preset-avatar
14php artisan vendor:publish --tag=beartropyui-preset-fab
15php artisan vendor:publish --tag=beartropyui-preset-datetime
16php artisan vendor:publish --tag=beartropyui-preset-time-picker
17php artisan vendor:publish --tag=beartropyui-preset-chat-input
18php artisan vendor:publish --tag=beartropyui-preset-file-dropzone
19php artisan vendor:publish --tag=beartropyui-preset-command-palette
20php artisan vendor:publish --tag=beartropyui-preset-slider

Preset Structure

Each preset file returns a PHP array with a colors key. Each color entry maps to a set of Tailwind classes used by the component.

Example: Input preset (simplified)

Below is a simplified version of the input preset. Each color key defines the classes for background, border, ring, text, placeholder, label, and more.

 1// resources/views/presets/input.php
 2return [
 3    'colors' => [
 4        'primary' => [
 5            'bg' => 'bg-gray-50 dark:bg-gray-900/50',
 6            'border' => 'border border-gray-300 dark:border-gray-700',
 7            'border_error' => 'border border-red-500',
 8            'ring' => 'focus-within:ring-1 focus-within:ring-beartropy-500',
 9            'ring_error' => 'focus-within:ring-1 focus-within:ring-red-500',
10            'text' => 'text-gray-800 dark:text-gray-100',
11            'placeholder' => 'placeholder:text-gray-400',
12            'label' => 'font-semibold text-gray-700 dark:text-gray-300 text-sm',
13            'label_error' => 'font-semibold text-red-500 text-sm',
14        ],
15        'beartropy' => [
16            'bg' => 'bg-beartropy-100 dark:bg-beartropy-900/50',
17            'border' => 'border border-beartropy-300 dark:border-beartropy-700',
18            // ...same keys, different classes
19        ],
20        // red, blue, green, purple, etc.
21    ],
22];

Adding Custom Colors

Add your own brand color by creating a new key in the preset's colors array.

Adding an 'enterprise' color to the input

Publish the input preset, then add your custom color key with all the required Tailwind classes. Use it via the magic attribute: <x-bt-input enterprise />.

 1// resources/views/presets/input.php
 2return [
 3    'colors' => [
 4        // ...existing colors
 5 
 6        'enterprise' => [
 7            'bg' => 'bg-enterprise-50 dark:bg-enterprise-900/50',
 8            'border' => 'border border-enterprise-300 dark:border-enterprise-600',
 9            'border_error' => 'border border-red-500',
10            'ring' => 'focus-within:ring-1 focus-within:ring-enterprise-500',
11            'ring_error' => 'focus-within:ring-1 focus-within:ring-red-500',
12            'text' => 'text-gray-800 dark:text-gray-100',
13            'placeholder' => 'placeholder:text-gray-400',
14            'label' => 'font-semibold text-gray-700 dark:text-gray-300 text-sm',
15            'label_error' => 'font-semibold text-red-500 text-sm',
16        ],
17    ],
18];

Using your custom color

Custom colors work as magic attributes, just like built-in colors:

1<x-bt-input enterprise label="Company Name" placeholder="Acme Corp" />
2 
3<x-bt-button enterprise>Submit</x-bt-button>

Don't forget Tailwind

If your custom color (e.g. enterprise) isn't a default Tailwind color, make sure to define it in your tailwind.config.js under theme.extend.colors.

Size Presets

Sizes are defined in a shared sizes.php preset file. All components read from it for consistent sizing.

Size

Five size presets are available: xs, sm, md (default), lg, xl. Each size defines dimensions for form elements, checkboxes, toggles, icons, avatars, buttons, and more.

resources/views/presets/sizes.php

 1return [
 2    'xs' => [
 3        'height' => 'h-7',    'font' => 'text-xs',  'px' => 'px-2',
 4        'box' => 'w-3 h-3',   'iconSize' => 'w-3 h-3',
 5        'avatar' => 'w-6 h-6 text-xs',
 6    ],
 7    'sm' => [
 8        'height' => 'h-8',    'font' => 'text-sm',  'px' => 'px-3',
 9        'box' => 'w-4 h-4',   'iconSize' => 'w-4 h-4',
10        'avatar' => 'w-8 h-8 text-sm',
11    ],
12    'md' => [
13        'height' => 'h-10',   'font' => 'text-base','px' => 'px-3',
14        'box' => 'w-5 h-5',   'iconSize' => 'w-5 h-5',
15        'avatar' => 'w-10 h-10 text-base',
16    ],
17    'lg' => [
18        'height' => 'h-12',   'font' => 'text-lg',  'px' => 'px-4',
19        'box' => 'w-6 h-6',   'iconSize' => 'w-6 h-6',
20        'avatar' => 'w-12 h-12 text-lg',
21    ],
22    'xl' => [
23        'height' => 'h-14',   'font' => 'text-xl',  'px' => 'px-4',
24        'box' => 'w-7 h-7',   'iconSize' => 'w-7 h-7',
25        'avatar' => 'w-16 h-16 text-xl',
26    ],
27];

Preset Keys Reference

Each component preset has different keys in its color array. Here are the most common ones:

Key	Used By	Description
bg	Input, Select, Card, Alert	Background color
border	Input, Select, Card	Normal border
border_error	Input, Select, Textarea	Error state border
ring	Input, Select, Textarea	Focus ring
text	Input, Button, Badge, Alert	Text color
label	Input, Select, Textarea	Label styling
label_error	Input, Select, Textarea	Label styling on error
icon	Alert, Badge	Icon color
chip_bg	Input, Select, Tag	Chip/tag background
checked	Checkbox, Radio, Toggle	Checked/active state

Discover all keys

To see every key a component supports, publish its preset and inspect the array. Each preset file is self-documenting.

Components with Preset Support

The following components support full preset customization:

Alert

Avatar

Badge

Button

Button Icon

Card

Chat Input

Checkbox

Command Palette

Datetime

Dropdown

FAB

File Dropzone

Input

Lookup

Menu

Nav

Radio

Select

Slider

Table

Textarea

Time Picker

Toggle