PHPackages                             open-boost/open-boost-ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. open-boost/open-boost-ui

ActiveComposer-plugin[Templating & Views](/categories/templating)

open-boost/open-boost-ui
========================

Laravel Blade components + JS integration for Dropdown, Modals, Select2, Flatpickr, Charts, Editors etc. A powerful Bootstrap-ready UI component library.

1.0.13(4mo ago)7301MITJavaScriptPHP >=8.0

Since Dec 15Pushed 4mo agoCompare

[ Source](https://github.com/mrsandipmandal/open-boost-ui)[ Packagist](https://packagist.org/packages/open-boost/open-boost-ui)[ Docs](https://github.com/mrsandipmandal/open-boost-ui)[ RSS](/packages/open-boost-open-boost-ui/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (13)Used By (0)

🚀 OpenBoost UI - Professional Blade Components Library
======================================================

[](#-openboost-ui---professional-blade-components-library)

[![Latest Stable Version](https://camo.githubusercontent.com/21a6a66da0391ddbe810b0107a2151c22497cc296bf197e2bdf737a14ceed7bb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f70656e2d626f6f73742f6f70656e2d626f6f73742d75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/open-boost/open-boost-ui)[![License](https://camo.githubusercontent.com/3209b4a28b86263225ac2c727afac47bf838e44748f98832005c9f747f22b2ff/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6f70656e2d626f6f73742f6f70656e2d626f6f73742d75692e7376673f7374796c653d666c61742d737175617265)](LICENSE.txt)[![PHP Version](https://camo.githubusercontent.com/e27f12b5914932c8a3dafe48e23ae5d13ac4b141e36979e68232ef5e34a5c5c6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f6f70656e2d626f6f73742f6f70656e2d626f6f73742d75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/open-boost/open-boost-ui)

**A comprehensive, production-ready Blade component library for Laravel** with 15+ pre-built UI components for Bootstrap -5, Tailwind CSS, and modern component frameworks.

### ✨ Key Features

[](#-key-features)

- 🎨 **15+ Ready-to-Use Components** - Accordion, Carousel, Tabs, Modals, Selects, Datepickers, Charts, and more
- 📦 **Zero External Dependencies** - All assets bundled, no npm required
- 🎯 **Auto-Initialization** - Components initialize automatically with vanilla JavaScript
- ♿ **Fully Accessible** - ARIA attributes, keyboard navigation, semantic HTML
- 🎭 **Multiple Themes** - Bootstrap 5 and Tailwind CSS support
- 📱 **Responsive Design** - Mobile-first, works on all devices
- ⚡ **Performance Optimized** - Lazy-loaded, minimal JavaScript footprint
- 🔌 **Framework Agnostic** - Works with any Laravel version 9+

---

⚡ Quick Start (3 Steps)
-----------------------

[](#-quick-start-3-steps)

### 1. Install Package

[](#1-install-package)

```
composer require open-boost/open-boost-ui
```

### 2. Publish Assets

[](#2-publish-assets)

```
php artisan vendor:publish --provider=OpenBoost\\UI\\OpenBoostServiceProvider --tag=open-boost-ui --force
```

### 3. Add to Your Layout (`resources/views/layouts/app.blade.php`)

[](#3-add-to-your-layout-resourcesviewslayoutsappbladephp)

**In ``:**

```
@openBoostAssets
```

**Before ``:**

```
@openBoostScripts
```

### ✅ Done! Use Any Component:

[](#-done-use-any-component)

```

    Select tags...
    PHP
    Laravel

```

**That's it!** No manual script includes needed! 🎉

---

📚 Component Library
-------------------

[](#-component-library)

### Form Components

[](#form-components)

#### 1️⃣ **Select** - Flexible Dropdown Input

[](#1️⃣-select---flexible-dropdown-input)

**Best for:** Choosing single/multiple options, autocomplete, large datasets

```

    Select category...
    Web Development
    Mobile Development

    Select tags...
    PHP
    Laravel

@php
    $options = ['php' => 'PHP', 'laravel' => 'Laravel', 'js' => 'JavaScript'];
@endphp

```

**Props:**

- `lib` - 'select2' or 'choices' (default: 'select2')
- `search` - Enable search (default: true)
- `multiple` - Allow multiple selections
- `theme` - 'bootstrap' or 'tailwind'

**Libraries:**

- **Select2** - Advanced features, large datasets, AJAX support
- **Choices.js** - Lightweight, modern, custom value creation

---

#### 2️⃣ **Datepicker** - Date/Time Selection

[](#2️⃣-datepicker---datetime-selection)

**Best for:** Booking systems, event dates, time tracking, form submissions

```

```

**Props:**

- `mode` - 'single', 'range', 'multiple' (default: 'single')
- `enableTime` - Include time picker
- `lib` - Currently supports 'flatpickr'

**Use Cases:**

- Booking appointments
- Meeting scheduling
- Event registration
- Deadline tracking

---

#### 3️⃣ **Radio Group** - Exclusive Option Selection

[](#3️⃣-radio-group---exclusive-option-selection)

**Best for:** Binary choices, preference selection, survey questions

```

```

**Props:**

- `direction` - 'vertical' or 'horizontal'
- `name` - Form field name (required)

---

#### 4️⃣ **Toggle** - Boolean Switch

[](#4️⃣-toggle---boolean-switch)

**Best for:** Feature flags, settings, enable/disable options

```

```

**Props:**

- `checked` - Initial state (true/false)
- `label` - Optional label text
- `id` - Unique identifier (required)

**Use Cases:**

- Settings preferences
- Feature toggles
- Newsletter subscriptions
- Privacy settings

---

### Data Display Components

[](#data-display-components)

#### 5️⃣ **Datatable** - Structured Data Display

[](#5️⃣-datatable---structured-data-display)

**Best for:** Displaying records, admin panels, data management interfaces

```

            Name
            Email
            Status

        @foreach($users as $user)

            {{ $user->name }}
            {{ $user->email }}

                    {{ $user->active ? 'Active' : 'Inactive' }}

        @endforeach

```

**Props:**

- `striped` - Alternating row colors
- `hoverable` - Highlight on hover
- `bordered` - Show borders

---

#### 6️⃣ **List with Pagination** - Paginated Item List

[](#6️⃣-list-with-pagination---paginated-item-list)

**Best for:** Blog posts, product listings, user directories

```

    @foreach($posts as $post)

            {{ $post->title }}
            {{ $post->excerpt }}

    @endforeach

```

**Props:**

- `perPage` - Items per page (default: 10)
- `theme` - 'bootstrap' or 'tailwind'

---

### Layout & Navigation Components

[](#layout--navigation-components)

#### 7️⃣ **Accordion** - Collapsible Content Sections

[](#7️⃣-accordion---collapsible-content-sections)

**Best for:** FAQs, feature lists, expandable content, documentation

```

        OpenBoost is a professional Blade component library for Laravel with 15+ pre-built components.

        Simply run: composer require open-boost/open-boost-ui

        Yes! OpenBoost is MIT licensed and completely free.

```

**Props:**

- `allowMultiple` - Allow multiple open sections (default: false)
- `theme` - 'bootstrap' or 'tailwind'

**Use Cases:**

- FAQ pages
- Documentation
- Product features
- Pricing tiers

---

#### 8️⃣ **Carousel** - Image/Content Slider

[](#8️⃣-carousel---imagecontent-slider)

**Best for:** Image galleries, testimonials, hero sections, featured content

```

```

**Props:**

- `autoPlay` - Auto-rotate slides
- `interval` - Rotation interval in ms (default: 5000)
- `showIndicators` - Show pagination dots

---

#### 9️⃣ **Tabs** - Tabbed Content

[](#9️⃣-tabs---tabbed-content)

**Best for:** Product features, documentation sections, user profiles

```

        Product Overview
        This is the overview tab content...

            Feature 1
            Feature 2

            Basic$9/mo
            Pro$29/mo

```

---

### Feedback & Messaging Components

[](#feedback--messaging-components)

#### 🔟 **Notification** - Alert Messages

[](#-notification---alert-messages)

**Best for:** Status messages, confirmations, warnings, errors

```

    Success! Your changes have been saved.

    Error! Something went wrong.

    Warning! Please review your input.

    Info: New updates available.

```

**Props:**

- `type` - 'success', 'error', 'warning', 'info'
- `dismissible` - Show close button
- `autoClose` - Auto-dismiss after delay
- `closeDelay` - Milliseconds before auto-close

---

#### 1️⃣1️⃣ **Tooltip** - Contextual Help

[](#1️⃣1️⃣-tooltip---contextual-help)

**Best for:** Inline help, UI hints, button descriptions

```

        Save

        Delete

```

**Props:**

- `text` - Tooltip text
- `position` - 'top', 'bottom', 'left', 'right'

---

### Modal & Dropdown Components

[](#modal--dropdown-components)

#### 1️⃣2️⃣ **Modal** - Dialog Box

[](#1️⃣2️⃣-modal---dialog-box)

**Best for:** Confirmations, forms, alerts, detailed content

```

    Are you sure you want to delete this item? This action cannot be undone.

        Cancel

            @csrf
            @method('DELETE')
            Delete

    Delete Item

```

---

#### 1️⃣3️⃣ **Dropdown** - Action Menu

[](#1️⃣3️⃣-dropdown---action-menu)

**Best for:** Navigation menus, action buttons, context menus

```

    Edit
    View Profile

    Delete

```

---

### Media & Data Visualization Components

[](#media--data-visualization-components)

#### 1️⃣4️⃣ **Chart** - Data Visualization

[](#1️⃣4️⃣-chart---data-visualization)

**Best for:** Analytics dashboards, reporting, data comparison

```

```

**Props:**

- `type` - 'bar', 'line', 'pie', 'doughnut', 'radar'
- `engine` - 'chartjs' or 'apexcharts'

**Supported Libraries:**

- **Chart.js** - Simple, responsive charts
- **ApexCharts** - Interactive, feature-rich charts

---

#### 1️⃣5️⃣ **Editor** - Rich Text Editing

[](#1️⃣5️⃣-editor---rich-text-editing)

**Best for:** Blog posts, documentation, content management

```

    {!! old('content') !!}

    {!! old('markdown') !!}

    {!! old('description') !!}

```

**Props:**

- `engine` - 'quill', 'simplemde', or 'trix'

**Editor Comparison:**

EditorBest ForLearning CurveQuillWYSIWYG editing, most featuresLowSimpleMDEMarkdown contentLowTrixRails-like experienceMedium---

🎯 Common Use Cases & Examples
---------------------------------

[](#-common-use-cases--examples)

### Case 1: User Management Form

[](#case-1-user-management-form)

```

    @csrf

        Department

            @foreach($departments as $dept)
                {{ $dept->name }}
            @endforeach

        Role

        Receive Notifications

    Create User

```

### Case 2: Product Showcase Dashboard

[](#case-2-product-showcase-dashboard)

```

                    Product
                    Stock
                    Price

                @foreach($products as $product)

                    {{ $product->name }}
                    {{ $product->stock }}
                    ${{ $product->price }}

                @endforeach

```

### Case 3: Blog Post Editor

[](#case-3-blog-post-editor)

```

    @csrf

        Category

        Tags

        Content

        Publish Date

    Publish

```

---

🔧 Configuration
---------------

[](#-configuration)

### Environment-Specific Themes

[](#environment-specific-themes)

In `resources/views/layouts/app.blade.php`:

```
@php
    $theme = config('app.ui_theme', 'bootstrap'); // bootstrap or tailwind
@endphp

```

### Global Configuration

[](#global-configuration)

Edit `config/open-boost.php`:

```
return [
    'default_theme' => 'bootstrap', // or 'tailwind'
    'default_chart' => 'chartjs',   // or 'apexcharts'
    'default_editor' => 'quill',    // or 'simplemde', 'trix'
    'animations_enabled' => true,
];
```

---

📖 Advanced Usage
----------------

[](#-advanced-usage)

### JavaScript API

[](#javascript-api)

#### Initialize Components Manually

[](#initialize-components-manually)

```
// Re-initialize components (useful for dynamically added content)
OpenBoost.initAll();

// Or initialize specific component type
OpenBoost.initSelects();
OpenBoost.initDatepickers();
OpenBoost.initAccordions();
```

#### Get Component References

[](#get-component-references)

```
// Get Select2 instance
const select = document.querySelector('[name="category"]');
jQuery(select).select2('open');

// Get Flatpickr instance
const datepicker = document.querySelector('[name="event_date"]');
flatpickr(datepicker).show();
```

#### Listen to Component Events

[](#listen-to-component-events)

```
// Select2 change event
jQuery('[name="tags"]').on('change', function() {
    const selected = jQuery(this).val();
    console.log('Selected:', selected);
});

// Datepicker change event
flatpickr('[name="event_date"]', {
    onChange: (selectedDates) => {
        console.log('Date changed:', selectedDates);
    }
});

// Accordion item toggle
document.addEventListener('click', (e) => {
    if (e.target.matches('[data-openboost-accordion-trigger]')) {
        console.log('Accordion toggled');
    }
});
```

#### Debug Helper

[](#debug-helper)

```
// In browser console
OpenBoost.debug();

// Output:
// 🔍 OpenBoost Debug Info
// Dependencies
// jQuery ($): ✅ Loaded
// Select2: ✅ Loaded
// Flatpickr: ✅ Loaded
// ...
// Components Found
// Selects: 2
// Datepickers: 1
// ...
```

---

### Custom Styling & Theming

[](#custom-styling--theming)

#### Override Default Classes

[](#override-default-classes)

```

    Active
    Inactive

```

#### Create Custom Theme

[](#create-custom-theme)

```

        Custom styled content

```

#### Tailwind CSS Configuration

[](#tailwind-css-configuration)

```

```

---

### Form Integration

[](#form-integration)

#### Validation Integration

[](#validation-integration)

```

    @csrf

        Category

            Select category...
            @foreach($categories as $cat)
                id)>
                    {{ $cat->name }}

            @endforeach

        @error('category_id')
            {{ $message }}
        @enderror

    Submit

```

#### Pre-fill Form Data

[](#pre-fill-form-data)

```

    Admin
    User

```

---

### Dynamic Content

[](#dynamic-content)

#### Load Options via AJAX

[](#load-options-via-ajax)

```

    Select subcategory...

// Fetch and populate on category change
document.querySelector('[name="category"]').addEventListener('change', async function() {
    const categoryId = this.value;
    const response = await fetch(`/api/categories/${categoryId}/subcategories`);
    const subcategories = await response.json();

    const select = document.querySelector('#subcat-select');
    select.innerHTML = 'Select subcategory...';

    subcategories.forEach(sub => {
        const option = document.createElement('option');
        option.value = sub.id;
        option.textContent = sub.name;
        select.appendChild(option);
    });

    // Reinitialize Select2
    jQuery(select).select2();
});

```

#### Add Items to Pagination List

[](#add-items-to-pagination-list)

```

    @foreach($posts as $post)

        {{ $post->title }}

    @endforeach

// Add new item dynamically
const listContainer = document.querySelector('[data-openboost-list-items]');
const newItem = document.createElement('li');
newItem.innerHTML = 'New Post Title';
listContainer.appendChild(newItem);

// Reinitialize list pagination
OpenBoost.initLists();

```

---

🚨 Troubleshooting
-----------------

[](#-troubleshooting)

### Components Not Rendering

[](#components-not-rendering)

**Error:** `Unable to locate a class or view for component [openBoost-*]`

**Solution:**

1. Ensure service provider is auto-discovered or registered in `config/app.php`
2. Run: `php artisan cache:clear && php artisan view:clear`
3. Verify views are published: `resources/views/vendor/boost/components/openBoost/`

### Select2/Choices Not Working

[](#select2choices-not-working)

**Error:** Options appear but dropdown doesn't work

**Solution:**

1. Verify jQuery is included before Select2
2. Check browser console for JavaScript errors
3. Run `OpenBoost.debug()` in console to check library status
4. Ensure `@openBoostScripts` is included before ``

```

    @openBoostAssets

    @openBoostScripts

```

### Datepicker Not Showing Calendar

[](#datepicker-not-showing-calendar)

**Error:** Input renders but calendar doesn't appear on click

**Solution:**

1. Include Flatpickr CSS in `@openBoostAssets`
2. Verify `flatpickr.min.js` is loaded
3. Check for JavaScript errors in console
4. Ensure Flatpickr CSS path is correct

### Components Styles Broken

[](#components-styles-broken)

**Error:** Components render but styling looks off

**Solution:**

1. Include Bootstrap/Tailwind CSS in layout
2. Add `@openBoostAssets` in ``
3. Check theme is set correctly: `theme="bootstrap"` or `theme="tailwind"`
4. Verify CSS files are being served from `public/vendor/open-boost/`

### Performance Issues

[](#performance-issues)

**Slow page load or responsiveness issues**

**Solutions:**

1. Defer component initialization:

    ```

    ```
2. Lazy-load heavy components:

    ```
    @if($showChart)

    @endif
    ```
3. Use `search="false"` for selects without search:

    ```

    ```

---

🔐 Security Considerations
-------------------------

[](#-security-considerations)

### CSRF Protection

[](#csrf-protection)

All components automatically respect Laravel's CSRF token:

```

    @csrf
    ...
    Submit

```

### XSS Protection

[](#xss-protection)

Component content is automatically escaped. For raw HTML:

```

    {{ $message }}

    {!! $trusted_html !!}

```

### Input Validation

[](#input-validation)

Always validate component values server-side:

```
// controller
$validated = $request->validate([
    'category_id' => 'required|exists:categories,id',
    'tags' => 'array|exists:tags,id',
    'event_date' => 'required|date_format:Y-m-d',
]);
```

---

📊 Supported Versions
--------------------

[](#-supported-versions)

LaravelPHPSupport9.x8.0+✅ Full10.x8.1+✅ Full11.x8.2+✅ Full---

🤝 Contributing
--------------

[](#-contributing)

We welcome contributions! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.

### Development Setup

[](#development-setup)

```
git clone https://github.com/mrsandipmandal/open-boost-ui.git
cd open-boost-ui

# Create test Laravel app
composer require laravel/laravel test-app
cd test-app

# Link local package
composer config repositories.open-boost path ../open-boost-ui
composer require open-boost/open-boost-ui:dev-master --prefer-source
```

### Running Tests

[](#running-tests)

```
php artisan test
```

---

📝 Component Checklist
---------------------

[](#-component-checklist)

- Accordion
- Carousel
- Chart
- Datepicker
- Datatable
- Dropdown
- Editor (Quill, SimpleMDE, Trix)
- List with Pagination
- Modal
- Notification
- Radio Group
- Select (Select2, Choices)
- Tabs
- Toggle
- Tooltip

---

📄 License
---------

[](#-license)

MIT License © 2024 [Sandip Mandal](https://github.com/mrsandipmandal). See [LICENSE.txt](LICENSE.txt).

---

🙏 Credits
---------

[](#-credits)

Built with modern best practices inspired by:

- [Laravel Blade Components](https://laravel.com/docs/blade#components)
- [Tailwind CSS](https://tailwindcss.com)
- [Bootstrap 5](https://getbootstrap.com/)
- Select2, Flatpickr, Chart.js, and other amazing open-source libraries

---

📞 Support & Resources
-------------------------

[](#-support--resources)

- 📖 [Full Documentation](COMPONENTS.md)
- 🐛 [Report Issues](https://github.com/mrsandipmandal/open-boost-ui/issues)
- 💬 [Discussions](https://github.com/mrsandipmandal/open-boost-ui/discussions)
- 📦 [Packagist](https://packagist.org/packages/open-boost/open-boost-ui)

---

**Made with ❤️ for the Laravel community**

###  Health Score

38

—

LowBetter than 85% of packages

Maintenance74

Regular maintenance activity

Popularity13

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

12

Last Release

145d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/1cfba1cdaaab95e40cfe363c3cd258c77ab78c5bf3fc26112e4b7a8d971565b5?d=identicon)[mrsandipmandal](/maintainers/mrsandipmandal)

---

Top Contributors

[![mrsandipmandal](https://avatars.githubusercontent.com/u/75414705?v=4)](https://github.com/mrsandipmandal "mrsandipmandal (93 commits)")

---

Tags

laraveluicomponentsbladeeditorbootstrapdropdownmodalchartselect2flatpickr

### Embed Badge

![Health badge](/badges/open-boost-open-boost-ui/health.svg)

```
[![Health](https://phpackages.com/badges/open-boost-open-boost-ui/health.svg)](https://phpackages.com/packages/open-boost-open-boost-ui)
```

###  Alternatives

[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k454.7k15](/packages/robsontenorio-mary)[area17/blast

Storybook for Laravel Blade

308664.1k](/packages/area17-blast)[mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

413.9k](/packages/mati365-ckeditor5-livewire)[electrik/slate

Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project

102.3k1](/packages/electrik-slate)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)