Getting Started

Installation Configuration

Components

Alert Badge Button Card Dialog Dropdown Icon Menu Table Tile Toggle Tooltip Typography

Getting Started

The components are built for Laravel, Livewire, and Tailwind CSS.

The minimum required dependencies are:

  • Laravel 10.x
  • Livewire 3.x (this also includes Alpine JS)
  • Tailwind CSS 4.x
  • Tailwind CSS Forms Plugin

Quick Start

Installing the Bear UI components is generally a three step process:

  1. Install the package and dependencies via composer and npm (or yarn).
  2. Modify your Tailwind CSS configuration to include the Bear UI theme and components.
  3. Add the Javascript assets to your project.

However, we recommend you use the bear:install command to get started. This will install the package, add the Tailwind CSS configuration, and add the Javascript assets to your project automatically... hopefully.

Using in an existing project? You will probably want to use Manual Installation

First, require the package via composer:

1composer require bearly/ui:dev-main
1composer require bearly/ui:dev-main
Copied!

Next, run the installer command:

1php artisan bear:install
1php artisan bear:install
Copied!

Once that's done you can run your build with npm run dev and use the components in your blade views!

Manual Installation

If you're installing the package in a new project, we recommend you use the bear:install command. If you're installing in an existing project or want full control you can use the following steps to install manually:

Install the Composer Package

First add the package to your composer.json file:

1composer require bearly/ui:dev-main
1composer require bearly/ui:dev-main
Copied!

Modify your Tailwind CSS Config

This step assumes that you already have a working Tailwind CSS installation with the tailwindcss/forms plugin. If you don't then please follow the Tailwind CSS installation guide and forms plugin installation guides first.

Add the following Tailwind CSS configuration options to your resources/css/app.css file:

1@import 'tailwindcss'
2 
3// ...
4 
5@source('../../vendor/bearly/ui') 
6@import '../../vendor/bearly/ui/css/colors.css' 
1@import 'tailwindcss'
2 
3// ...
4 
5@source('../../vendor/bearly/ui') 
6@import '../../vendor/bearly/ui/css/colors.css'
Copied!

Add Script Assets

The last step is to add the Javascript assets to your project. Usually this is done in thes resources/js/app.js file.

1import { ui } from '../../vendor/bearly/ui/js/index.js' 
2 
3document.addEventListener('alpine:init', () => { 
4  ui(window.Alpine) 
5}) 
6 
7// ...
1import { ui } from '../../vendor/bearly/ui/js/index.js' 
2 
3document.addEventListener('alpine:init', () => { 
4  ui(window.Alpine) 
5}) 
6 
7// ...
Copied!

If you're manually bundling Livewire and Alpine you can use the Alpine plugin instead:

1import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm'
2import ui from '../../vendor/bearly/ui/js/index.js' 
3 
4// Needs to come before Livewire.start() 
5Alpine.plugin(ui) 
6 
7Livewire.start()
1import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm'
2import ui from '../../vendor/bearly/ui/js/index.js' 
3 
4// Needs to come before Livewire.start() 
5Alpine.plugin(ui) 
6 
7Livewire.start()
Copied!

Note: Livewire only injects its Javascript assets when it detects a Livewire component by default, so you'll likely want to Manually include Livewire's frontend assets or force asset injection by adding \Livewire\Livewire::forceAssetInjection(); in your AppServiceProvider.php file. Otherwise Alpine and Livewire won't be injected on pages unless they contain a Livewire component.

Use the components

Run your frontend build with npm run dev and start using the components!

For example, a button:

1<ui:button>Click Me</ui:button>
1<ui:button>Click Me</ui:button>
Copied!

Customization

Publish the components you'd like to customize to resources/views/vendor/ui/components and change however you wish. You own them now!

To publish the components, run the php artisan bear:publish command:

1php artisan bear:publish
1php artisan bear:publish
Copied!

The components you choose will be copied to your resources/views/vendor/ui directory.

Publishing components manually: If you wish to publish components manually, the files exist in the vendor/bearly/ui/resources/views/components directory. Duplicate to your PROJECT_ROOT/resources/views/vendor/ui/components directory to extend them.

For example:

1cp -R vendor/bearly/ui/resources/views/components ./resources/views/vendor/ui/components
1cp -R vendor/bearly/ui/resources/views/components ./resources/views/vendor/ui/components
Copied!
Like this project? Stop by the bear cave to stargaze.