Logo Beartropy

Configuration

Customize Beartropy UI to fit your project needs.

The config file

If you published the config file, you’ll find it at config/beartropy/ui/beartropy.php.
You’ll also see a navs/default.php published. For more info, see the Nav component.

This config file comes with global customizations to adapt Beartropy UI to your project and workflow.

Envs

You can set the following environment variables in your .env file to customize Beartropy UI without the need to publish neither config or presets

BEARTROPY_UI_PREFIX - Set a prefix for all Beartropy UI components.
BEARTROPY_UI_ICON_SET - Set the default icon set (heroicons, lucide, fontawesome).
BEARTROPY_UI_ICON_VARIANT - Set the default icon variant (outline, solid).

For components, you can set colors, sizes, and outlines for inputs, textareas, tags, buttons, badges, checkboxes, radios, toggles, and tables.

The following are the defaults
blade 
            
 1//Prefix
 2BEARTROPY_UI_PREFIX=
 3 
 4//Icons
 5BEARTROPY_UI_ICON_SET=heroicons
 6BEARTROPY_UI_ICON_VARIANT=outline
 7 
 8//Components
 9BEARTROPY_UI_INPUT_COLOR=beartropy
10BEARTROPY_UI_INPUT_SIZE=md
11BEARTROPY_UI_INPUT_OUTLINE=true
12BEARTROPY_UI_TEXTAREA_COLOR=beartropy
13BEARTROPY_UI_TEXTAREA_SIZE=md
14BEARTROPY_UI_TEXTAREA_OUTLINE=true
15BEARTROPY_UI_TAG_COLOR=beartropy
16BEARTROPY_UI_TAG_SIZE=md
17BEARTROPY_UI_TAG_OUTLINE=true
18BEARTROPY_UI_BUTTON_COLOR=beartropy
19BEARTROPY_UI_BUTTON_SIZE=md
20BEARTROPY_UI_BADGE_COLOR=beartropy
21BEARTROPY_UI_BADGE_SIZE=sm
22BEARTROPY_UI_CHECKBOX_COLOR=beartropy
23BEARTROPY_UI_CHECKBOX_SIZE=md
24BEARTROPY_UI_RADIO_COLOR=beartropy
25BEARTROPY_UI_RADIO_SIZE=md
26BEARTROPY_UI_TOGGLE_COLOR=beartropy
27BEARTROPY_UI_TOGGLE_SIZE=md
28BEARTROPY_UI_TABLE_COLOR=beartropy

Publish config file

To publish the Beartropy UI config file:
shell 
            
1php artisan vendor:publish --provider="Beartropy\Ui\BeartropyUiServiceProvider" --tag="beartropy-ui-config"

Prefix

In the config file you can set a prefix for all Beartropy UI components.
This is useful to avoid conflicts with other packages or your own components.
blade 
            
 1/*
 2|--------------------------------------------------------------------------
 3| Blade Component Prefix
 4|--------------------------------------------------------------------------
 5| Set the prefix you want to use for all registered Blade components.
 6| If left empty, components will be registered as <x-button>, <x-sidebar>, etc.
 7| For example, setting 'bt' will register <x-bt-button>, <x-bt-sidebar>, etc.
 8*/
 9 
10'prefix' => env('BEARTROPY_UI_PREFIX', ''),

Icons

In the config file you can set the default icon set and variant for all Beartropy UI components.
This is useful to ensure consistency across your application.

The package comes with with blade ui kit heroicons included and set by default. If you wish to use lucide or fontawesome you can install the package and set it in the config file.

Tip: you can have all 3 installed and pass a "set" prop to the icon component to use a specific set instead of the default one.
blade 
            
 1<?php
 2'icons' => [
 3    /*
 4    |--------------------------------------------------------------------------
 5    | Default Icon Set
 6    |--------------------------------------------------------------------------
 7    | Determines which icon set will be used by default throughout your application.
 8    | Supported: "heroicons", "lucide", "fontawesome"
 9    | You can always override this per icon with the "set" attribute.
10    */
11    'set' => env('BEARTROPY_UI_ICON_SET', 'heroicons'),
12 
13    /*
14    |--------------------------------------------------------------------------
15    | Default Icon Variant (Heroicons Only)
16    |--------------------------------------------------------------------------
17    | Sets the default style variant for Heroicons. You can choose between
18    | "outline" (default) and "solid". Lucide and FontAwesome only have one style.
19    | This value can be overridden per icon with the "solid" or "outline" attributes.
20    */
21    'variant' => env('BEARTROPY_UI_ICON_VARIANT', 'outline'), // outline | solid
22],

Defaults

In the config file you can set the default values for many components.
These values will be used if no specific attributes are provided when using the component.
You can override these defaults by passing attributes directly to the component.
blade 
            
 1<?php
 2/*
 3|--------------------------------------------------------------------------
 4| Component Defaults
 5|--------------------------------------------------------------------------
 6| Here you can set the default values for each component.
 7| These values will be used if no specific attributes are provided when using the component.
 8| You can override these defaults by passing attributes directly to the component.
 9*/
10'component_defaults' => [
11    'input' => [
12        'color' => env('BEARTROPY_UI_INPUT_COLOR', 'beartropy'),
13        'size' => env('BEARTROPY_UI_INPUT_SIZE', 'md'),
14        'outline' => env('BEARTROPY_UI_INPUT_OUTLINE', true)
15    ],
16    'textarea' => [
17        'color' => env('BEARTROPY_UI_TEXTAREA_COLOR', 'beartropy'),
18        'size' => env('BEARTROPY_UI_TEXTAREA_SIZE', 'md'),
19        'outline' => env('BEARTROPY_UI_TEXTAREA_OUTLINE', true)
20    ],
21    'tag' => [
22        'color' => env('BEARTROPY_UI_TAG_COLOR', 'beartropy'),
23        'size' => env('BEARTROPY_UI_TAG_SIZE', 'md'),
24        'outline' => env('BEARTROPY_UI_TAG_OUTLINE', true)
25    ],
26    'button' => [
27        'color' => env('BEARTROPY_UI_BUTTON_COLOR', 'beartropy'),
28        'size' => env('BEARTROPY_UI_BUTTON_SIZE', 'md')
29    ],
30    'badge' => [
31        'color' => env('BEARTROPY_UI_BADGE_COLOR', 'beartropy'),
32        'size' => env('BEARTROPY_UI_BADGE_SIZE', 'sm'),
33    ],
34    'checkbox' => [
35        'color' => env('BEARTROPY_UI_CHECKBOX_COLOR', 'beartropy'),
36        'size' => env('BEARTROPY_UI_CHECKBOX_SIZE', 'md'),
37    ],
38    'radio' => [
39        'color' => env('BEARTROPY_UI_RADIO_COLOR', 'beartropy'),
40        'size' => env('BEARTROPY_UI_RADIO_SIZE', 'md'),
41    ],
42    'toggle' => [
43        'color' => env('BEARTROPY_UI_TOGGLE_COLOR', 'beartropy'),
44        'size' => env('BEARTROPY_UI_TOGGLE_SIZE', 'md'),
45    ],
46    'table' => [
47        'color' => env('BEARTROPY_UI_TABLE_COLOR', 'beartropy'),
48    ],
49],
Code highlighting provided by Torchlight