Logo Beartropy

Presets

Control is on your hands again: customize Beartropy UI components to fit your project's needs.

Preset customization

Every project is unique: branding, design, user experience, etc.
That’s why Beartropy UI is as flexible and easy to customize as possible: no vendor lock-in, no complex overrides.
Each component has "presets"—PHP files that return arrays with all available styles for that component.

Want your button to match the impossible hexadecimal from your company? Just add a new key to the presets array, change whatever you want, and use it everywhere in your project. No need to touch component code.

Customizing UI Presets

Beartropy UI offers a presets system to easily customize the appearance of your navigation, buttons, inputs, and more.
Presets are simple PHP arrays that define color schemes, sizes, and design tokens for each component.

To customize a component’s presets, publish and edit the corresponding file.
shell 
            
1php artisan vendor:publish --provider="Beartropy\Ui\BeartropyUIServiceProvider" --tag="beartropy-ui-presets"

Example

Lets say you want have your enterprise colour and you want your inputs to be that particular color: bg-enterprise-500 text-enterprise-200 ...
First you publish the input preset file, then you add the key you want to name it and thats it!
php 
            
 1// Publishing the input preset
 2php artisan vendor:publish --tag=beartropyui-preset-input
 3 
 4// Adding a key to the input preset
 5<?php
 6 
 7return [
 8    'colors' => [
 9        'beartropy' => [
10            'bg' => 'bg-white dark:bg-gray-900/50',
11            'border' => 'border border-neutral-300 dark:border-neutral-700',
12            'border_error' => 'border border-red-500',
13            'ring' => 'focus-within:ring-2 focus-within:ring-beartropy-500 focus-within:border-beartropy-500',
14            'ring_error' => 'focus-within:ring-2 focus-within:ring-red-500 focus-within:border-red-500',
15            'text' => 'text-gray-800 dark:text-gray-100',
16            'placeholder' => 'placeholder:text-gray-400 dark:placeholder:text-gray-500',
17            'disabled_bg' => 'disabled:bg-neutral-100 dark:disabled:bg-neutral-800',
18            'disabled_text' => 'disabled:text-gray-400 dark:disabled:text-gray-600',
19            'label' => 'text-gray-800 dark:text-gray-100 font-semibold ml-1',
20            'label_error' => 'text-red-500 font-semibold ml-1',
21            'chip_bg' => 'bg-neutral-100 dark:bg-neutral-800',
22            'chip_text' => 'text-gray-900 dark:text-gray-100',
23            'chip_close' => 'hover:text-red-500',
24        ],
25        'enterprise' => [
26            'bg' => 'bg-enterprise-500 dark:bg-enterprise-700',
27            'border' => 'border border-enterprise-300 dark:border-enterprise-600',
28            'border_error' => 'border border-red-500',
29            'ring' => 'focus-within:ring-2 focus-within:ring-enterprise-500 focus-within:border-enterprise-500',
30            'ring_error' => 'focus-within:ring-2 focus-within:ring-red-500 focus-within:border-red-500',
31            'text' => 'text-white dark:text-gray-100',
32            'placeholder' => 'placeholder:text-gray-200 dark:placeholder:text-gray-400',
33            'disabled_bg' => 'disabled:bg-neutral-100 dark:disabled:bg-neutral-800',
34            'disabled_text' => 'disabled:text-gray-400 dark:disabled:text-gray-600',
35            'label' => 'text-white dark:text-gray-100 font-semibold ml-1',
36            'label_error' => 'text-red-500 font-semibold ml-1',
37            'chip_bg' => 'bg-neutral-100 dark:bg-neutral-800',
38            'chip_text' => 'text-gray-900 dark:text-gray-100',
39            'chip_close' => 'hover:text-red-500',
40        ],
41 
42// Now you can use it like this
43<x-input enterprise />

Defaults

You can set default values for Beartropy UI components in your .env file.
or publish the config file to customize them.

See more in the Configuration section.
Code highlighting provided by Torchlight