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 assets

In order to use Beartropy UI, you need to include the necessary assets in your application. This includes the CSS and JS files, as well as any other dependencies that Beartropy UI requires.
blade 
            
 1<head>
 2    <meta charset="utf-8">
 3    <meta name="viewport" content="width=device-width, initial-scale=1">
 4    <meta name="csrf-token" content="{{ csrf_token() }}">
 5 
 6    <title>{{ config('app.name', 'Laravel') }}</title>
 7 
 8    @BeartropyAssets 
 9    <!-- Scripts -->
10    @vite(['resources/css/app.css', 'resources/js/app.js'])
11 
12</head>

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