Requirements

Make sure your project meets these minimum requirements before installing.

PHP 8.1+

Laravel 10+

Livewire 3.x / 4.x

Tailwind 3.x / 4.x

Install via Composer

Run this in your Laravel project

1composer require beartropy/ui

Tailwind CSS Setup

Register Beartropy's preset and content paths so Tailwind can detect all component classes.

Tailwind CSS v3 (tailwind.config.js)

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

Tailwind CSS v4 (resources/css/app.css)

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

Include Assets

Add the @BeartropyAssets directive to your layout's <head> tag. This loads the required CSS and JavaScript.

Layout file

 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    @vite(['resources/css/app.css', 'resources/js/app.js'])
10</head>

Component Prefix

Set a prefix to avoid naming conflicts with other packages or your own components.

.env

Setting BEARTROPY_UI_PREFIX=bt registers components as <x-bt-button>, <x-bt-alert>, etc. Leave empty to use <x-button>, <x-alert>.

1BEARTROPY_UI_PREFIX=bt

Icon component

The icon component defaults to <x-bt-icon> even without a prefix, to avoid conflicts with Blade UI Kit. With a prefix like bear, it becomes <x-bear-icon>.

Publishing Assets

Beartropy UI ships with publishable config and preset files for full customization.

Publish the config file

Publishes to config/beartropy/ui/beartropy.php. Lets you configure prefix, icons, component defaults, and permissions.

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

Publish all presets

Publishes all component style presets (colors, sizes, variants). See the Presets page for details.

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

Publish individual component presets

Publish only the preset for specific components you want to customize:

1php artisan vendor:publish --tag=beartropyui-preset-input
2php artisan vendor:publish --tag=beartropyui-preset-select
3php artisan vendor:publish --tag=beartropyui-preset-button
4php artisan vendor:publish --tag=beartropyui-preset-textarea