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

composer 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)

// tailwind.config.js
export default {
    presets: [
        require('./vendor/beartropy/ui/tailwind.config.js'),
    ],
    content: [
        // ...your files
        './vendor/beartropy/ui/resources/views/**/*.php',
        './vendor/beartropy/ui/src/Components/**/*.php',
    ],
    darkMode: 'class',
};

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

@import "tailwindcss";
@config "../../vendor/beartropy/ui/tailwind.config.js";
@source "../../vendor/beartropy/ui/resources/views";
@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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    @BeartropyAssets
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</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>.

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

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

php 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:

php artisan vendor:publish --tag=beartropyui-preset-input
php artisan vendor:publish --tag=beartropyui-preset-select
php artisan vendor:publish --tag=beartropyui-preset-button
php artisan vendor:publish --tag=beartropyui-preset-textarea