Logo Beartropy UI
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: 

1composer require beartropy/ui

Tailwind setup

Add Beartropy components and views to your tailwind.config.js: 

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

Tailwind v4 Setup

If you are using Tailwind CSS v4, use the CSS based configuration in resources/css/app.css: 

1@import "tailwindcss";
2 
3@config "../../vendor/beartropy/ui/tailwind.config.js"; 
4 
5@source "../../vendor/beartropy/tables/src/resources/views"; 
6@source "../../vendor/beartropy/ui/resources/views"; 
7@source "../../vendor/beartropy/ui/src/Components";

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. 

 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</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>.

1// .env
2BEARTROPY_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: 

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

Publish all presets

To publish all style/color/variant presets: 

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: 

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