Logo Beartropy

Installation

Get started with Beartropy UI in just a few steps.

Requirements

  • Laravel 10 or newer
  • PHP 8.1+
  • Livewire 3
  • Tailwind CSS 3.x/4.x

Install via Composer

Run this in your Laravel project:
shell 
            
1composer require beartropy/ui

Tailwind setup

Add Beartropy components and views to your tailwind.config.js:
js 
            
 1export default {
 2    presets: [
 3        //other files
 4        require('./vendor/beartropy/ui/tailwind.config.js'), 
 5    ],
 6    // ...
 7    content: [
 8        // ...other files
 9        './vendor/beartropy/ui/resources/views/**/*.php', 
10        './vendor/beartropy/ui/src/Components/**/*.php', 
11    ],
12    darkMode: 'class',
13    // ...
14};

The prefix

In addition to laravel components, livewire components, and other great packages, we also publish some blade components.
We dont want to make you choose, so you can set a prefix in your .env file for all Beartropy UI blade components in order to avoid conflicts.

Setting BEARTROPY_UI_PREFIX=bt will make the button component available as <x-bt-button> instead of <x-button>.


The icon component
As we use the Blade ui kit, the icon component is already claimed by them. So by default we use <x-bt-icon> for Beartropy icons.
This only applies if you dont set a prefix. If you set a prefix like "bear", then the icon component will be <x-bear-icon>.
js 
            
1BEARTROPY_UI_PREFIX=bt

Publishables

Beartropy UI has different publishable assets to help you customize the toolkit.

Publish config file

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

Publish all presets

To publish all style/color/variant presets:
shell 
            
1php artisan vendor:publish --provider="Beartropy\Ui\BeartropyUiServiceProvider" --tag="beartropy-ui-presets"

Publish component presets

You can also publish only the preset for a specific component:
shell 
            
1php artisan vendor:publish --tag=beartropyui-preset-input
2php artisan vendor:publish --tag=beartropyui-preset-select
3php artisan vendor:publish --tag=beartropyui-preset-textarea
4php artisan vendor:publish --tag=beartropyui-preset-button
Code highlighting provided by Torchlight