PHPackages                             djaker-hakim/stm-ui-components - 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. djaker-hakim/stm-ui-components

ActiveLibrary[Templating & Views](/categories/templating)

djaker-hakim/stm-ui-components
==============================

premade blade components

v2.1.2(9mo ago)019[1 issues](https://github.com/djaker-hakim/stm-ui-components/issues)MITBlade

Since Jun 14Pushed 7mo ago1 watchersCompare

[ Source](https://github.com/djaker-hakim/stm-ui-components)[ Packagist](https://packagist.org/packages/djaker-hakim/stm-ui-components)[ RSS](/packages/djaker-hakim-stm-ui-components/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (7)Used By (0)

Introduction
============

[](#introduction)

**stm-ui-components** is a modern UI library built to speed up development in Laravel applications. It provides a set of **pre-built components** that combine the power of **Laravel Blade components**, **Alpine.js**, and **TailwindCSS**.

This library is designed to reduce the repetitive and time-consuming work involved in building everyday interface elements. If a component typically takes you an hour to build, with `stm-ui-components` it can take as little as **2 minutes**.

Why stm-ui-components?
----------------------

[](#why-stm-ui-components)

- 🚀 **Fast Development** – Focus on building features, not rebuilding UI.
- ⚙️ **Laravel-native** – Uses the Laravel component system for seamless integration.
- 🎨 **TailwindCSS-powered** – Fully styled using utility-first classes.
- 🧠 **Alpine.js support** – Adds interactivity without leaving HTML.
- 🔗 **CDN Ready** – No complex setup; Tailwind and Alpine load via CDN.

Who is it for?
--------------

[](#who-is-it-for)

This library is primarily built for use in Laravel projects. At the moment, it is developed and maintained for internal use by **me and my team**, but may later expand to broader usage.

What’s included?
----------------

[](#whats-included)

- A growing collection of reusable UI components (buttons, modals, alerts, tables, etc.)
- Integrated Alpine.js behavior for interactive components
- TailwindCSS for styling consistency and flexibility

Guide
=====

[](#guide)

- [Installation](#installation)
- [Usage](#usage)
- [Component Overview](#components-overview)
- [Form Components](#form-components)
- [UI Components](#ui-components)
- [Master Components](#master-components)
- [`$stm` Global Controller Object](#stm-global-controller-object)

Installation
============

[](#installation)

Requirements
------------

[](#requirements)

To use **Stm UI Components**, ensure your Laravel project meets the following requirements:

- **Laravel**: ^10.x or higher
- **PHP**: ^8.1 or higher

Install the package via Composer:

```
composer require djaker-hakim/stm-ui-components
```

Usage
=====

[](#usage)

To use the Stm UI Components library in your Laravel Blade templates, you need to include the necessary styles and scripts, then use any component with the `x-stm::` prefix.

1. **Include styles**
    Use `` in the `` section of your HTML to include the component styles. If you're using Tailwind CSS, set the `:tailwindcss` attribute to `true`.
2. **Use components**
    Components are prefixed with `x-stm::` and follow Blade component syntax. For example:
    `Click Me`
3. **Include scripts**
    Use `` before the closing `` tag to include the required JavaScript (Alpine.js and any component logic).

---

Notes
-----

[](#notes)

- All components require `` to function properly.
- Tailwind CSS must be included for components to render correctly when using Tailwind-based themes.

---

Example
-------

[](#example)

```

    {{-- Include Stm styles and Tailwind CSS --}}

    Stm UI Components

    {{-- Using a button component --}}

        Click Me

    {{-- Include Alpine.js and component interactivity --}}

```

Components Overview
===================

[](#components-overview)

All `stm-ui-components` are designed to be **flexible**, **configurable**, and **easy to use** out of the box.

Each component accepts a set of **attributes** that fall into two main categories:

1. Component Attributes
-----------------------

[](#1-component-attributes)

These are specific to `stm-ui-components`. They control the behavior, style, and structure of the component. Examples include:

- `theme`
- `config`
- `color`
- `size`

2. Standard HTML Attributes
---------------------------

[](#2-standard-html-attributes)

All standard HTML attributes are supported and passed directly to the rendered HTML element. Examples:

- `class`
- `style`
- `disabled`
- `type`
- `href`

You can use both types of attributes together to customize your component precisely as needed.

Theme Attribute
---------------

[](#theme-attribute)

The `theme` attribute allows you to control the styling preset applied to any component. It accepts the following values:

### `standard` (default)

[](#standard-default)

### `stm`

[](#stm)

Applies the default, minimal styles.

```
Click Me
```

### `custom`

[](#custom)

This mode gives you **full control** over the component’s appearance. When using `theme="custom"`, you are expected to provide your own styles either through:

- The `config` attribute *(recommended for most components)*
- The `class` attribute *(when directly targeting the root element)*

You can also **extend or override** the built-in themes by adding additional classes via either the `config` or `class` attributes, depending on how the component is structured.

Style Component
---------------

[](#style-component)

The style system in `stm-ui-components` is designed to be configurable and theme-aware. The following attributes are used globally or per component to control styles dynamically:

### Available Attributes

[](#available-attributes)

#### `tailwindcss` (boolean)

[](#tailwindcss-boolean)

Enables the TailwindCSS CDN if needed.

- **Default:** `false`
- **Usage:**

#### `animatecss` (boolean)

[](#animatecss-boolean)

Controls whether [Animate.css](https://animate.style) animations are included via CDN.

- **Default:** `true`
- **Usage:**

```

```

#### `config` (array)

[](#config-array)

A configuration array used to define global styling options and color variables for all components.

### Example

[](#example-1)

```

```

### Color Usage by Component

[](#color-usage-by-component)

ComponentColors Used`checkbox``accent`, `muted``error``danger``file``accent`, `bg-1`, `muted``input``accent`, `muted`, `bg-2`, `danger``number``accent`, `muted`, `bg-2`, `danger``password``accent`, `muted`, `bg-2`, `danger``radio``accent`, `muted``search``accent`, `muted`, `bg-2`, `danger``select``accent`, `muted`, `bg-2`, `danger``switch``accent`, `muted``textarea``accent`, `muted`, `bg-2`, `danger``button``bg-1`, `accent``collapse``bg-2``dropdown``bg-2``modal``bg-1``navbar``bg-2``pagination``accent`, `bg-1`, `muted``progressbar``accent``sidebar``bg-2``spinner``accent``table``bg-1`, `accent`, `bg-2`, `muted``tabs``bg-1`, `accent`, `muted``datatable``muted`, `accent`Script Component
----------------

[](#script-component)

The `` component is used to include **Alpine.js** and its optional plugins via CDN. It is configurable using the `config` attribute.

### Attributes

[](#attributes)

#### `config` (array)

[](#config-array-1)

A configuration array for loading JavaScript-related assets.

##### Available Keys:

[](#available-keys)

KeyTypeDefaultDescription`alpinejs`boolean`true`Controls whether Alpine.js and its plugins are loaded via CDN.#### Example:

[](#example-2)

```

```

> ℹ️ Set `alpinejs` to `false` if Alpine.js is already loaded in your app or managed separately.

---

Form Components
===============

[](#form-components)

Below is a list of available form components. Click any component to view its detailed documentation.

- [Checkbox](#checkbox)
- [Error](#error)
- [File](#file)
- [Input](#input)
- [Number](#number)
- [Password](#password)
- [Radio](#radio)
- [Search](#search)
- [Select](#select)
- [Switch](#switch)
- [Textarea](#textarea)

Checkbox
========

[](#checkbox)

The `` component is a customizable checkbox form element that supports theming, sizing, and advanced styling through configuration.

Attributes
----------

[](#attributes-1)

### `theme`

[](#theme)

- Type: `string`
- Options: `standard`, `custom`
- Default: `'standard'`
- Description: Defines the visual theme for the checkbox.

### `color`

[](#color)

- Type: `string`
- Description: Sets the color of the checkbox. Accepts any valid CSS color (e.g., `#fff`, `var(--stm-color-primary)`, etc.).

### `size`

[](#size)

- Type: `string`
- Options: `sm`, `md`, `lg`
- Description: Controls the size of the checkbox.

### `config`

[](#config)

- Type: `array`
- Description: Used to apply custom styles when `theme="custom"` or to override parts of the default theme.

#### `config` keys:

[](#config-keys)

KeyDescription`containerClass`CSS classes for the outer wrapper`labelClass`CSS classes for the label text`inputClass`CSS classes for the native checkbox input`iconClass`CSS classes for the checkbox icon (if any)Example
-------

[](#example-3)

```

```

Error
=====

[](#error)

The `` component is used to display validation or custom error messages in form components. It supports theming, sizing, and can be controlled dynamically via its API.

Attributes
----------

[](#attributes-2)

### `id`

[](#id)

- Type: `string`
- Description: Identifier for targeting the component programmatically via its API.

### `theme`

[](#theme-1)

- Type: `string`
- Default: `'standard'`
- Description: Visual theme applied to the error message. Supports `'standard'`, `'stm'`, or `'custom'`.

### `color`

[](#color-1)

- Type: `string`
- Description: Defines the color of the error message (commonly uses `--stm-color-danger` color from theme config).

### `size`

[](#size-1)

- Type: `string`
- Options: `sm`, `md`, `lg`
- Description: Sets the size of the error message text.

### `class`

[](#class)

- Type: `string`
- Description: Custom classes applied directly to the component for styling.

### `message`

[](#message)

- Type: `string`
- Description: Initial message to be displayed before any dynamic updates.

API Methods
-----------

[](#api-methods)

You can control the component dynamically using Alpine.js by its `id`:

### `setMessage(message)`

[](#setmessagemessage)

Sets a new error message.

```
$stm.component('component-id').setMessage('Email is required')
```

### `reset()`

[](#reset)

Clears the current message.

```
$stm.component('component-id').reset();
```

Example
-------

[](#example-4)

```

```

File
====

[](#file)

The `` component is a styled file input that supports theming, sizing, and customizable colors for better UI consistency.

Attributes
----------

[](#attributes-3)

### `theme`

[](#theme-2)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual theme of the component.

### `color`

[](#color-2)

- Type: `string`
- Description: Defines the primary color used for borders, text, and icons. Accepts any valid CSS color (e.g., `#fff`, `var(--stm-color-primary)`, etc.).

### `backgroundColor`

[](#backgroundcolor)

- Type: `string`
- Description: Sets the background color of the file input. Accepts any valid CSS color (e.g., `#fff`, `var(--stm-color-primary)`, etc.)

### `size`

[](#size-2)

- Type: `string`
- Options: `sm`, `md`, `lg`
- Description: Controls the size of the component, including padding, font-size, and icon size.

### `class`

[](#class-1)

- Type: `string`
- Description: Custom classes to further style or position the component.

Example
-------

[](#example-5)

```

```

Input
=====

[](#input)

The `` component is a customizable text input field designed for consistent theming and sizing across your application.

Attributes
----------

[](#attributes-4)

### `theme`

[](#theme-3)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Determines the styling theme applied to the input. `'standard'` offers a neutral look, while `'stm'` applies your library's custom styling.

### `color`

[](#color-3)

- Type: `string`
- Description: Sets the input's accent color (borders, focus ring, etc.). Accepts any valid CSS color (e.g., `#fff`, `var(--stm-color-accent)`, etc.).

### `size`

[](#size-3)

- Type: `string`
- Options: `sm`, `md`, `lg`
- Description: Adjusts the size of the input, including padding, font size, and height.

### `class`

[](#class-2)

- Type: `string`
- Description: Additional Tailwind CSS classes to style or position the component.

Example
-------

[](#example-6)

```

```

Number
======

[](#number)

The `` component is a numeric input field styled to match your UI library. It supports theming, sizing, and custom colors for visual consistency.

Attributes
----------

[](#attributes-5)

### `theme`

[](#theme-4)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Selects the design theme applied to the component.

### `color`

[](#color-4)

- Type: `string`
- Description: Defines the accent or border color for the input. Accepts any valid CSS color (e.g., `#fff`, `var(--stm-color-accent)`, etc.).

### `size`

[](#size-4)

- Type: `string`
- Options: `sm`, `md`, `lg`
- Description: Controls the overall size of the input including font, spacing, and height.

### `class`

[](#class-3)

- Type: `string`
- Description: Tailwind CSS utility classes to extend or override default styling.

Example
-------

[](#example-7)

```

```

Password
========

[](#password)

The `` component provides a styled and interactive password input field. It supports theming, size control, visibility toggling, and custom styling through the `config` attribute.

Attributes
----------

[](#attributes-6)

### `id`

[](#id-1)

- Type: `string`
- Description: Identifier for targeting the component programmatically via its API.

### `theme`

[](#theme-5)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Defines the visual theme of the component.

### `color`

[](#color-5)

- Type: `string`
- Description: Accent color used for borders or focus state.

### `size`

[](#size-5)

- Type: `string`
- Options: `sm`, `md`, `lg`
- Description: Sets the component size (padding, font size, etc.).

### `class`

[](#class-4)

- Type: `string`
- Description: classes for additional styling or layout control.

### `config`

[](#config-1)

- Type: `array`
- Description: Configuration options to customize behavior and appearance.

#### `config` Keys:

[](#config-keys-1)

KeyTypeDescription`state``string`Initial visibility state (`'show'` or `'hide'`)`showButton``boolean`Whether to display the toggle show/hide button`style``array`Styling classes for the toggle icon (`iconClass`)API Methods
-----------

[](#api-methods-1)

You can control password visibility via Alpine.js or JavaScript by referencing the component using its `id`.

### `show()`

[](#show)

Reveals the password.

### `hide()`

[](#hide)

Hides the password.

### `toggle()`

[](#toggle)

Toggles visibility between shown and hidden.

Example
-------

[](#example-8)

```

```

Radio
=====

[](#radio)

The `` component is a styled radio input that supports theming and flexible styling via the `config` attribute.

Attributes
----------

[](#attributes-7)

### `theme`

[](#theme-6)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Defines the visual style preset for the component.

### `color`

[](#color-6)

- Type: `string`
- Description: Sets the accent color for the radio input (e.g., `accent`, `primary`, `danger`, etc.).

### `config`

[](#config-2)

- Type: `array`
- Description: Allows you to override default styling by customizing specific parts of the component.

#### `config['style']` keys:

[](#configstyle-keys)

KeyDescription`containerClass`Custom class for the outer container`lableClass`Custom class for the `` element`inputClass`Custom class for the radio input itself`iconClass`Custom class for the optional check icon (if any)Example
-------

[](#example-9)

```

```

Search
======

[](#search)

The `` component is a customizable search input that includes optional icon support and theme styling. It provides flexibility through sizing and a `config` object for fine-grained control over layout and design.

Attributes
----------

[](#attributes-8)

### `theme`

[](#theme-7)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Selects the component's theme. Use `'standard'` for a minimal base or `'stm'` for a branded UI look.

### `color`

[](#color-7)

- Type: `string`
- Description: Sets the accent color (border, focus ring, or icon). Accepts values like `accent`, `primary`, `danger`, etc.

### `size`

[](#size-6)

- Type: `string`
- Options: `sm`, `md`, `lg`
- Description: Controls the component's overall size (padding, font, and height).

### `config`

[](#config-3)

- Type: `array`
- Description: Used to customize styling for different parts of the component.

#### `config['style']` keys:

[](#configstyle-keys-1)

KeyDescription`containerClass`Tailwind classes for the outer wrapper`inputClass`Tailwind classes for the search input field`iconClass`Tailwind classes for the search iconExample
-------

[](#example-10)

```

```

Select
======

[](#select)

The `` component renders a styled dropdown (select input) with theming, sizing, and Alpine.js-based API access. It's useful for consistent select inputs across your UI.

Attributes
----------

[](#attributes-9)

### `id`

[](#id-2)

- Type: `string`
- Description: A unique identifier for accessing the component’s API (e.g., with Alpine.js).

### `theme`

[](#theme-8)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Defines the component's theme style.

### `color`

[](#color-8)

- Type: `string`
- Description: Sets the accent color of the select input (e.g., borders, focus ring).

### `size`

[](#size-7)

- Type: `string`
- Options: `sm`, `md`, `lg`
- Description: Controls the visual size of the component.

### `class`

[](#class-5)

- Type: `string`
- Description: Additional CSS classes to style or position the component.

### `options`

[](#options)

- Type: `array`
- Description: An associative array of options where the **key** is the value of the `` and the **value** is the label shown to the user.

### `selected`

[](#selected)

- Type: `string`
- Description: The key of the option to be selected initially.

API Methods
-----------

[](#api-methods-2)

You can retrieve the currently selected value via JavaScript using:

### `getSelected()`

[](#getselected)

Returns the value of the selected option.

```

```

Switch
======

[](#switch)

The `` component is a toggle-style input used to represent boolean values (on/off). It supports themes, sizing, and custom styling through the `config` attribute.

Attributes
----------

[](#attributes-10)

### `theme`

[](#theme-9)

- Type: `string`
- Options: `'standard'`
- Default: `'standard'`
- Description: Sets the visual theme of the switch component.

### `color`

[](#color-9)

- Type: `string`
- Description: Defines the active (checked) color for the switch.

### `size`

[](#size-8)

- Type: `string`
- Options: `sm`, `md`, `lg`
- Description: Adjusts the size of the switch.

### `config`

[](#config-4)

- Type: `array`
- Description: Customizes styles for each part of the component.

#### `config['style']` keys:

[](#configstyle-keys-2)

KeyDescription`containerClass`Classes for the wrapper`lableClass`Classes for the label (if present)`inputClass`Classes for the input (switch itself)Example
-------

[](#example-11)

```

```

Textarea
========

[](#textarea)

The `` component provides a styled multiline text input area. It supports theming, sizing, and custom styling to fit seamlessly with your UI.

Attributes
----------

[](#attributes-11)

### `theme`

[](#theme-10)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual style of the textarea.

### `color`

[](#color-10)

- Type: `string`
- Description: Defines the accent color used for borders, focus, and highlights.

### `size`

[](#size-9)

- Type: `string`
- Options: `sm`, `md`, `lg`
- Description: Controls the spacing, font size, and padding of the textarea.

### `class`

[](#class-6)

- Type: `string`
- Description: Additional Tailwind CSS classes to apply to the textarea for layout or style customization.

Example
-------

[](#example-12)

```

```

UI Components
=============

[](#ui-components)

Below is a list of available UI components. Click any component to view its detailed documentation.

- [Alert](#alert)
- [Avatar](#Avatar)
- [Button](#button)
- [Collapse](#collapse)
- [Dropdown](#dropdown)
- [Modal](#modal)
- [Navbar](#navbar)
- [Pagination](#pagination)
- [Progressbar](#progressbar)
- [Sidebar](#sidebar)
- [Spinner](#spinner)
- [Table](#table)
- [Tabs](#tabs)

Alert
=====

[](#alert)

The `` component is a flexible and customizable alert system that allows dynamic messages and styles with full JavaScript API support.

---

Attributes
----------

[](#attributes-12)

### `id`

[](#id-3)

- **Type:** `string`
- **Description:** Identifier for the component to use with the JavaScript API and events.

### `theme`

[](#theme-11)

- **Type:**
- **options:** `'standard'`, `'stm'`
- **Description:** Determines the visual theme of the alert.

### `color`

[](#color-11)

- **Type:** `string`
- **Description:** Sets the base color for the alert.

### `config`

[](#config-5)

An object that defines the alert's behavior and style.

KeyTypeDescription`state``boolean`Controls the visibility (open/close state) of the alert.`position``string`Sets the alignment of the alert on the screen.`style``array`Styling options for the alert container and box. See `style` details below.`animation``array`/`string`Controls the animation behavior of the alert. See `animation` details below.---

### `config['style']`

[](#configstyle)

KeyTypeDescription`containerClass``string`Custom classes for the outer container of the alert.`alertClass``string`Custom classes for the alert box itself.---

### `config['animation']`

[](#configanimation)

KeyTypeDescription`enter``string`Enter animation class (e.g., `'fadeInDown'`) from animate.css.`leave``string`Leave animation class (e.g., `'fadeOutUp'`) from animate.css.`duration``string`Duration of the animation (e.g., `'300ms'`).> **Note:** Due to Blade component limitations, use `x-transition:enter=""` instead of shorthand like `x-transition` or `x-transition.scale`.

---

API Methods
-----------

[](#api-methods-3)

Use the following methods to control the alert via JavaScript.

MethodDescription`error(msg)`Set alert message and mode to `'error'``warn(msg)`Set alert message and mode to `'warning'``success(msg)`Set alert message and mode to `'success'``info(msg)`Set alert message and mode to `'info'``setContent(msg, mode)`Set alert message and mode dynamically`open()`Show the alert`close()`Hide the alert`toggle()`Toggle alert visibility`openTmp(duration)`Open alert temporarily (default: 4000ms)---

Modes
-----

[](#modes)

Valid modes for setting content or style:

- `error`
- `warning`
- `info`
- `success`

---

Events
------

[](#events)

You can control the alert component via custom Alpine events:

Event NameDescription`open-alert`Opens the alert`close-alert`Closes the alert`toggle-alert`Toggles alert visibility### Example:

[](#example-13)

```
$dispatch('open-alert', { id: 'alert-1' });
```

> **Note:** You must include the id of the component in the event payload. Otherwise, it will affect all alert components.

Example
-------

[](#example-14)

```

```

Avatar
======

[](#avatar)

The `` component displays a user image or placeholder with support for theming, sizing, and custom styling.

Attributes
----------

[](#attributes-13)

### `theme`

[](#theme-12)

- Type: `string`
- Options: `'standard'`
- Default: `'standard'`
- Description: Sets the visual style of the avatar.

### `size`

[](#size-10)

- Type: `string`
- Options: `'sm'`, `'md'`, `'lg'`, or any valid CSS size (e.g. `'100px'`, `'5rem'`, `'20%'`)
- Description: Controls the avatar’s width and height. Supports both predefined sizes and custom values.

### `class`

[](#class-7)

- Type: `string`
- Description: Additional CSS classes to apply to the avatar for layout or style customization.

Example
-------

[](#example-15)

```

```

Button Component
================

[](#button-component)

The `` component provides a styled and flexible button element with support for themes, color customization, variants, and sizes.

Attributes
----------

[](#attributes-14)

### `theme`

[](#theme-13)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual theme of the button.

### `color`

[](#color-12)

- Type: `string`
- Description: Sets the text and border color of the button.

### `backgroudColor`

[](#backgroudcolor)

- Type: `string`
- Description: Sets the background color of the button.

### `variant`

[](#variant)

- Type: `string`
- Options: `'solid'`, `'outline'`, `'elevated'`
- Default: `'solid'`
- Description: Determines the button style variant.

### `size`

[](#size-11)

- Type: `string`
- Options: `'sm'`, `'md'`, `'lg'`
- Description: Controls the padding, font size, and overall dimensions of the button.

### `class`

[](#class-8)

- Type: `string`
- Description: Additional Tailwind CSS classes to apply to the button for layout or style customization.

Example
-------

[](#example-16)

```
Click Me
```

Collapse
========

[](#collapse)

The `` component provides a toggleable section that can expand or collapse content. It supports theming, color customization, and JavaScript control via API or events.

Attributes
----------

[](#attributes-15)

### `id`

[](#id-4)

- Type: `string`
- Description: Unique identifier for the component used with JavaScript API and event control.

### `theme`

[](#theme-14)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual theme of the collapse container.

### `color`

[](#color-13)

- Type: `string`
- Description: Defines the text or border color of the collapse component.

### `backgroundColor`

[](#backgroundcolor-1)

- Type: `string`
- Description: Defines the background color of the collapse content area.

### `class`

[](#class-9)

- Type: `string`
- Description: Additional CSS classes to apply for layout or style customization.

### `config`

[](#config-6)

- Type: `array`
- Description: Configuration options for the component behavior.

#### `state`

[](#state)

- Type: `boolean`
- Description: Controls the initial open/closed state of the collapse.

---

API Methods
-----------

[](#api-methods-4)

Use the following methods through the JavaScript component API:

MethodDescription`open()`Opens the collapse.`close()`Closes the collapse.`toggle()`Toggles the open/close state.---

Events
------

[](#events-1)

You can control the collapse via Alpine.js custom events:

Event NameDescription`open-collapse`Opens the specified collapse.`close-collapse`Closes the specified collapse.`toggle-collapse`Toggles the collapse.### Example:

[](#example-17)

```
dispatch('open-collapse', { id: 'collapse-1' });
```

**Note:** Always include the `id` of the component in the event payload. If omitted, the event will affect all collapse components.

Example
-------

[](#example-18)

```

        Collapsible content goes here.

```

Dropdown
========

[](#dropdown)

The `` component provides a configurable dropdown menu with support for positioning, animations, theming, and programmatic control.

Attributes
----------

[](#attributes-16)

### `id`

[](#id-5)

- Type: `string`
- Description: Unique identifier for the component used with JavaScript API and event control.

### `theme`

[](#theme-15)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual theme of the dropdown.

### `color`

[](#color-14)

- Type: `string`
- Description: Defines the text or border color of the dropdown content.

### `backgroundColor`

[](#backgroundcolor-2)

- Type: `string`
- Description: Sets the background color of the dropdown menu.

### `class`

[](#class-10)

- Type: `string`
- Description: Additional Tailwind CSS classes for layout or style customization.

### `config`

[](#config-7)

- Type: `array`
- Description: Configuration options for behavior, positioning, and interactivity.

#### `buttonId`

[](#buttonid)

- Type: `string`
- Description: ID of the button that toggles the dropdown.

#### `state`

[](#state-1)

- Type: `boolean`
- Description: Controls the initial open/closed state of the dropdown.

#### `position`

[](#position)

- Type: `string`
- Options:
    - **Bottom:** `'bottom'`, `'bottom-start'`, `'bottom-end'`
    - **Top:** `'top'`, `'top-start'`, `'top-end'`
    - **Left:** `'left'`, `'left-start'`, `'left-end'`
    - **Right:** `'right'`, `'right-start'`, `'right-end'`
- Description: Controls where the dropdown appears relative to the trigger button.

#### `offset`

[](#offset)

- Type: `number`
- Default: `5`
- Description: The space (in pixels) between the button and the dropdown menu.

#### `clickOutside`

[](#clickoutside)

- Type: `boolean`
- Default: `true`
- Description: Whether clicking outside should close the dropdown.

#### `animation`

[](#animation)

- Type: `string` or `array`
- Options: `'none'` or array of `enter`, `leave`, and `duration`
- Description: Controls the enter and leave animations.

##### `enter`

[](#enter)

- Type: `string`
- Example: `'fadeInDown'` (from animate.css)

##### `leave`

[](#leave)

- Type: `string`
- Example: `'fadeOutUp'` (from animate.css)

##### `duration`

[](#duration)

- Type: `string`
- Example: `'300ms'`

> **Note:** Due to Blade component limitations, use `x-transition:enter=""` syntax instead of shorthand directives like `x-transition` or `x-transition.scale`.

---

API Methods
-----------

[](#api-methods-5)

MethodDescription`open()`Opens the dropdown.`close()`Closes the dropdown.`toggle()`Toggles the dropdown state.---

Events
------

[](#events-2)

You can control the dropdown using Alpine.js custom events:

Event NameDescription`open-dropdown`Opens the specified dropdown.`close-dropdown`Closes the specified dropdown.`toggle-dropdown`Toggles the dropdown.### Example:

[](#example-19)

```
$dispatch('open-dropdown', { id: 'dropdown-1' });
```

> **Note:** Always include the `id` of the component in the event payload. If omitted, the event will affect all dropdown components.

Example
-------

[](#example-20)

```

    Dropdown content here

```

Modal
=====

[](#modal)

The `` component provides a customizable modal dialog with support for theming, animations, click outside behavior, and programmatic control.

Attributes
----------

[](#attributes-17)

### `id`

[](#id-6)

- Type: `string`
- Description: Unique identifier for the component, used with the API and events.

### `theme`

[](#theme-16)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual theme of the modal.

### `color`

[](#color-15)

- Type: `string`
- Description: Sets the text or border color of the modal content.

### `backgroundColor`

[](#backgroundcolor-3)

- Type: `string`
- Description: Sets the background color of the modal content container.

### `class`

[](#class-11)

- Type: `string`
- Description: Additional CSS classes to apply for layout or style customization.

### `config`

[](#config-8)

- Type: `array`
- Description: Configuration array for modal behavior and appearance.

#### `state`

[](#state-2)

- Type: `boolean`
- Default: `false`
- Description: Controls the initial open/closed state of the modal.

#### `clickOutside`

[](#clickoutside-1)

- Type: `boolean`
- Default: `true`
- Description: Enables or disables closing the modal when clicking outside the content area.

#### `backdrop`

[](#backdrop)

- Type: `string`
- Options: `'none'`, `'dark'`, `'light'`, `'blur'`
- Description: Controls the appearance of the modal backdrop.

#### `style`

[](#style)

- Type: `array`
- Description: Nested array for internal modal styling.

##### `backdropClass`

[](#backdropclass)

- Type: `string`
- Description: Custom classes applied to the backdrop element.

#### `animation`

[](#animation-1)

- Type: `'string'` or `array`
- options: `'none'` or `array`
- Description: Defines the modal's animations.

##### `enter`

[](#enter-1)

- Type: `string`
- Example: `'fadeInUp'` (from animate.css)

##### `leave`

[](#leave-1)

- Type: `string`
- Example: `'fadeOutDown'` (from animate.css)

##### `duration`

[](#duration-1)

- Type: `string`
- Example: `'200ms'`

> **Note:** Due to Blade component limitations, use `x-transition:enter=""` syntax instead of `x-transition` or `x-transition.scale`.

---

API Methods
-----------

[](#api-methods-6)

MethodDescription`open()`Opens the modal.`close()`Closes the modal.`toggle()`Toggles the modal state.---

Events
------

[](#events-3)

Use Alpine.js custom events to control the modal:

Event NameDescription`open-modal`Opens the specified modal.`close-modal`Closes the specified modal.`toggle-modal`Toggles the modal state.### Example:

[](#example-21)

```
$dispatch('open-modal', { id: 'modal-1' });
```

> **Note:** Always include the id of the component in the event payload. If omitted, the event will affect all modal components.

Example
-------

[](#example-22)

```

        Modal content goes here.

```

Navbar
======

[](#navbar)

The `` component provides a customizable navigation bar with support for theming, sticky behavior, and custom styling.

Attributes
----------

[](#attributes-18)

### `theme`

[](#theme-17)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual theme of the navbar.

### `color`

[](#color-16)

- Type: `string`
- Description: Defines the text or icon color inside the navbar.

### `backgroundColor`

[](#backgroundcolor-4)

- Type: `string`
- Description: Sets the background color of the navbar.

### `class`

[](#class-12)

- Type: `string`
- Description: Additional Tailwind CSS classes to apply to the navbar for layout or style customization.

### `config`

[](#config-9)

- Type: `array`
- Description: Configuration array for navbar behavior.

#### `sticky`

[](#sticky)

- Type: `boolean`
- Default: `false`
- Description: Enables or disables sticky positioning for the navbar.

Slots
-----

[](#slots)

### `start`

[](#start)

- Description: Slot at the start of the navbar. mostly used for Brand.

### `center`

[](#center)

- Description: Slot at the center of the navbar. used for Title or Menu.

### `end`

[](#end)

- Description: Slot at the end of the navbar. used for Buttons or Menu.

---

Example
-------

[](#example-23)

```

        Brand

        Title

        Menu

```

Pagination
==========

[](#pagination)

The `` component provides a dynamic and customizable pagination interface, with API methods and event hooks for advanced integration.

Attributes
----------

[](#attributes-19)

### `id`

[](#id-7)

- Type: `string`
- Description: Unique identifier for the component, used with the API and events.

### `theme`

[](#theme-18)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual theme of the pagination.

### `color`

[](#color-17)

- Type: `string`
- Description: Defines the color used for active or focused items.

### `backgroundColor`

[](#backgroundcolor-5)

- Type: `string`
- Description: Sets the background color for pagination buttons.

### `size`

[](#size-12)

- Type: `string`
- Options: `sm`, `md`, `lg`
- Description: Controls the size and spacing of the pagination buttons.

### `config`

[](#config-10)

- Type: `array`
- Description: Configuration array for pagination behavior and appearance.

#### `pages`

[](#pages)

- Type: `number`
- Description: Total number of pages to display.

#### `currentPage`

[](#currentpage)

- Type: `number`
- Default: `1`
- Description: The currently selected page.

#### `limit`

[](#limit)

- Type: `number`
- Default: `5`
- Description: Number of page buttons to show at once.

#### `style`

[](#style-1)

- Type: `array`
- Description: Style customization for internal pagination elements.

##### `containerClass`

[](#containerclass)

- Type: `string`
- Description: Classes applied to the pagination container.

##### `itemClass`

[](#itemclass)

- Type: `string`
- Description: Classes applied to each pagination button.

##### `activeItemClass`

[](#activeitemclass)

- Type: `string`
- Description: Classes applied to the currently active page.

##### `leftArrowClass`

[](#leftarrowclass)

- Type: `string`
- Description: Classes applied to the left (previous) arrow.

##### `rightArrowClass`

[](#rightarrowclass)

- Type: `string`
- Description: Classes applied to the right (next) arrow.

---

API Methods
-----------

[](#api-methods-7)

MethodDescription`setLimit()`Sets the number of visible page buttons.`setTotalPages()`Updates the total number of pages.`selectPage()`Selects a specific page.`next()`Goes to the next page.`prev()`Goes to the previous page.---

Events
------

[](#events-4)

EventDescription`change-page`Dispatched when the page changes.### Example

[](#example-24)

```
x-on:change-page.window="doSomething($event.detail)"
```

detail object:

```
{
  id: 'pagination-1',
  page: 3
}
```

Example
-------

[](#example-25)

```

```

Progressbar
===========

[](#progressbar)

The `` component provides a customizable progress indicator with support for theming, sizing, animations, and percentage labels.

Attributes
----------

[](#attributes-20)

### `id`

[](#id-8)

- Type: `string`
- Description: Unique identifier for the component, used with API methods.

### `theme`

[](#theme-19)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual theme of the progress bar.

### `color`

[](#color-18)

- Type: `string`
- Description: Sets the color of the progress fill.

### `size`

[](#size-13)

- Type: `string`
- Options: `xs`, `sm`, `md`, `lg`
- Description: Controls the height and visual size of the progress bar.

### `config`

[](#config-11)

- Type: `array`
- Description: Configuration array for progress behavior and styles.

#### `progress`

[](#progress)

- Type: `number` or `string`
- Default: `0`
- Description: Sets the initial progress value. Use `'infinite'` for an animated loading effect.

#### `duration`

[](#duration-2)

- Type: `string`
- Description: Transition speed when changing progress, e.g. `'300ms'`.

#### `pourcentage`

[](#pourcentage)

- Type: `string`
- Options: `'none'`, `'start'`, `'center'`, `'end'`
- Default: `'none'`
- Description: Controls the position of the percentage label inside the bar.

#### `style`

[](#style-2)

- Type: `array`
- Description: Custom styling for internal parts of the component.

##### `labelClass`

[](#labelclass)

- Type: `string`
- Description: Classes applied to the label text.

##### `containerClass`

[](#containerclass-1)

- Type: `string`
- Description: Classes applied to the outer container of the progress bar.

##### `fillClass`

[](#fillclass)

- Type: `string`
- Description: Classes applied to the filled portion of the bar.

##### `pourcentageClass`

[](#pourcentageclass)

- Type: `string`
- Description: Classes applied to the percentage label.

---

API Methods
-----------

[](#api-methods-8)

MethodDescription`setProgress()`Updates the progress value.`setLabel()`Sets or updates the label text.`setDuration()`Changes the transition duration.---

> **Note:** To enable an **infinite loading animation**, set `progress` to `'infinite'`.

---

Example
-------

[](#example-26)

```

```

Sidebar
=======

[](#sidebar)

The `` component provides a responsive, configurable sidebar with customizable width, height, and behavior. It supports breakpoints, clickOutside handling, and external event control.

Attributes
----------

[](#attributes-21)

### `id`

[](#id-9)

- Type: `string`
- Description: Unique identifier for the component, used with API and events.

### `theme`

[](#theme-20)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual theme of the sidebar.

### `color`

[](#color-19)

- Type: `string`
- Description: Sets the text or icon color inside the sidebar.

### `backgroundColor`

[](#backgroundcolor-6)

- Type: `string`
- Description: Sets the background color of the sidebar.

### `class`

[](#class-13)

- Type: `string`
- Description: Additional CSS classes to style the sidebar.

### `config`

[](#config-12)

- Type: `array`
- Description: Configuration array for sidebar behavior and layout.

#### `state`

[](#state-3)

- Type: `boolean`
- Default: `true`
- Description: Initial visibility state of the sidebar.

#### `maxWidth`

[](#maxwidth)

- Type: `string`
- Default: `'200px'`
- Description: The width of the sidebar when expanded.

#### `minWidth`

[](#minwidth)

- Type: `string`
- Default: `'0px'`
- Description: The minimum width when collapsed (useful for persistent collapsed mode in large screens).

#### `height`

[](#height)

- Type: `string`
- Default: `'100dvh'`
- Description: Height of the sidebar.

#### `position`

[](#position-1)

- Type: `string`
- Options: `'left'`, `'right'`
- Description: Sidebar opening direction.

#### `breakpoint`

[](#breakpoint)

- Type: `array`
- Description: Behavior at certain screen widths.

##### `width`

[](#width)

- Type: `string`
- Description: Minimum screen width before applying breakpoint behavior.

##### `clickOutside`

[](#clickoutside-2)

- Type: `boolean`
- Description: Enables closing the sidebar when clicking outside (at breakpoint).

---

API Methods
-----------

[](#api-methods-9)

MethodDescription`open()`Opens the sidebar.`close()`Closes the sidebar.`toggle()`Toggles the sidebar state.---

Events
------

[](#events-5)

EventDescription`open-sidebar`Opens a specific sidebar.`close-sidebar`Closes a specific sidebar.`toggle-sidebar`Toggles a specific sidebar.### Example

[](#example-27)

```
$dispatch('open-sidebar', { id: 'sidebar-1' })
```

> **Note:** Always include the component id when dispatching events; otherwise, the event will apply to all sidebar components.

Usage Note
----------

[](#usage-note)

When using a button outside the sidebar to trigger it, make sure to stop event propagation to prevent interference with clickOutside logic:

```
Toggle Sidebar
```

Example
-------

[](#example-28)

```

        Dashboard
        Settings
        ...

```

Spinner
=======

[](#spinner)

The `` component provides a simple and customizable loading spinner. It supports theming, sizing, and color options to match your UI design.

Attributes
----------

[](#attributes-22)

### `theme`

[](#theme-21)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual style of the spinner.

### `color`

[](#color-20)

- Type: `string`
- Description: Sets the spinner color.

### `size`

[](#size-14)

- Type: `string`
- Options: `'sm'`, `'md'`, `'lg'`, or any valid size value like `'100px'`, `'20rem'`, etc.
- Description: Defines the width and height of the spinner.

### `class`

[](#class-14)

- Type: `string`
- Description: Additional Tailwind CSS classes to style or position the spinner.

---

Example
-------

[](#example-29)

```

```

Table
=====

[](#table)

The `` component is a fully customizable, responsive data table that supports sorting, selection, mobile card view, and more. It adapts to both desktop and mobile layouts using a `view` mode and provides comprehensive styling and configuration options.

---

Attributes
----------

[](#attributes-23)

### `id`

[](#id-10)

- Type: `string`
- Description: Unique identifier for the component, used with API and events.

### `theme`

[](#theme-22)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the table's visual style.

### `color`

[](#color-21)

- Type: `string`
- Description: Text or icon color inside the table.

### `backgroundColor`

[](#backgroundcolor-7)

- Type: `string`
- Description: Sets the table's background color.

### `data`

[](#data)

- Type: `array`
- Description: The table rows data array.

### `config`

[](#config-13)

- Type: `array`
- Description: Main configuration options.

---

Config Options
--------------

[](#config-options)

### `sortable`

[](#sortable)

- Type: `boolean`
- Default: `true`
- Description: Enables column sorting.

### `selectable`

[](#selectable)

- Type: `boolean`
- Default: `false`
- Description: Enables row selection with checkboxes.

### `selectAllBtn`

[](#selectallbtn)

- Type: `boolean`
- Default: `true`
- Description: Shows a “Select All” checkbox.

### `view`

[](#view)

- Type: `string`
- Options: `'auto'`, `'desktop'`, `'mobile'`
- Default: `'auto'`
- Description: Controls responsive display behavior.

### `emptyMessage`

[](#emptymessage)

- Type: `string`
- Default: `'no data found'`
- Description: Message displayed when no data is available.

---

`table` Subconfig
-----------------

[](#table-subconfig)

### `headers`

[](#headers)

- Type: `array`
- Description: Table headers in the form `['key' => 'Label']`.

### `style`

[](#style-3)

- Type: `array`
- Description: Style options for the desktop table.

KeyTypeDescription`lightColor``string`Color used for hover and stripe effect`width`, `height``string`Table dimensions (e.g., `'800px'`)`stickyHeader``bool`Fixes the header during scroll`hoverable``bool`Enables row hover effect`striped``bool`Enables alternating row stripes`bordered``bool`Enables table borders`tableContainerClass`, `tableClass`, `theadClass`, `tbodyClass`, `trClass`, `thClass`, `tdClass``string`Tailwind CSS classes for styling---

`card` Subconfig (for Mobile View)
----------------------------------

[](#card-subconfig-for-mobile-view)

### `cardHeader`

[](#cardheader)

- Type: `array`
- Description: Headers shown in mobile card view (subset of `headers`).

### `style`

[](#style-4)

- Type: `array`
- Description: Style options for mobile layout.

KeyDescription`mTableClass`Wrapper class for mobile table container`mTheadClass`Class for mobile table head`mTbodyClass`Class for mobile body container`mTrClass`Class for mobile row`mThClass`Class for mobile label header`mTdClass`Class for mobile value container`cardClass`Main card wrapper class`chClass`Card header class`cdClass`Card data/content classSlots
-----

[](#slots-1)

### `action`

[](#action)

- Description: Slot for action buttons per row. You get access to the row object (e.g., `row.id`, `row.name`, etc.).

### `loader`

[](#loader)

- Description: Slot for custom loader when loading is `true`.

---

API Methods
-----------

[](#api-methods-10)

MethodDescription`setupData(data)`Initializes the data`setData(data)`set or updates the data`removeSelect()`Disables row selection`showSelect()`Enables row selection`toggleSelect()`Toggles row selection availability`getSelection()`Returns selected rows---

API Properties
--------------

[](#api-properties)

### `loading`

[](#loading)

- Type: `boolean`
- Default: `false`
- Description: Set to `true` to show loading state.

---

Example
-------

[](#example-30)

```

        Edit

```

Tabs
====

[](#tabs)

The `` component creates an accessible and themeable tab interface with support for enabling/disabling specific tabs and custom styling.

---

Attributes
----------

[](#attributes-24)

### `id`

[](#id-11)

- Type: `string`
- Description: Unique identifier for the component, used for programmatic control.

### `theme`

[](#theme-23)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the visual theme of the tab interface.

### `color`

[](#color-22)

- Type: `string`
- Description: Accent or primary color applied to active tab styles.

### `backgroundColor`

[](#backgroundcolor-8)

- Type: `string`
- Description: Background color of the active tab.

### `data`

[](#data-1)

- Type: `array`
- Description: Array of tab definitions. Each item should include keys: `label`, `value`, `target`, and optionally `disabled`.

### `config`

[](#config-14)

- Type: `array`
- Description: Configuration for custom styles.

#### `style`

[](#style-5)

KeyTypeDescription`tabClass``string`Classes applied to each tab`activeTabClass``string`Classes applied to the active tab`containerClass``string`Wrapper class for the entire tabs container---

API Methods
-----------

[](#api-methods-11)

MethodDescription`activate(value)`Activates a tab by its `value``disable(value)`Disables a specific tab`enable(value)`Enables a specific tab---

Example
-------

[](#example-31)

```

    Profile Tab
    Settings Tab

```

Master Components
=================

[](#master-components)

Below is a list of available Master components. Click any component to view its detailed documentation.

- [Datatable](#datatable)

Datatable
=========

[](#datatable)

The `` component provides an advanced table interface with pagination, sorting, selection, column control, and search functionality.

---

Attributes
----------

[](#attributes-25)

### `id`

[](#id-12)

- Type: `string`
- Description: Unique identifier for the component, used for API access.

### `theme`

[](#theme-24)

- Type: `string`
- Options: `'standard'`, `'stm'`
- Default: `'standard'`
- Description: Sets the component's styling theme.

### `color`

[](#color-23)

- Type: `string`
- Description: Defines the component's accent color.

### `backgroundColor`

[](#backgroundcolor-9)

- Type: `string`
- Description: Sets the background color of the component.

### `data`

[](#data-2)

- Type: `array`
- Description: Array of table row objects to be displayed.

### `config`

[](#config-15)

- Type: `array`
- Description: Configuration options for table behavior and appearance.

#### `navigation`

[](#navigation)

KeyTypeDescription`searchable``bool`Enables the search input. Default: `true``perPageOptions``array`Dropdown values for items per page. Ex: `['10'=>'10']``columns``bool`Enable/disable column visibility toggle. Default: `true`#### `sortable`

[](#sortable-1)

- Type: `bool`
- Description: Enable sorting by clicking column headers. Default: `true`

#### `selectable`

[](#selectable-1)

- Type: `bool`
- Description: Allow selection of individual table rows. Default: `false`

#### `selectAllBtn`

[](#selectallbtn-1)

- Type: `bool`
- Description: Display the select-all button. Default: `true`

#### `view`

[](#view-1)

- Type: `string`
- Options: `'auto'`, `'desktop'`, `'mobile'`
- Default: `'auto'`
- Description: Controls the view mode for responsive behavior.

#### `emptyMessage`

[](#emptymessage-1)

- Type: `string`
- Description: Message to display when there's no data. Default: `'no data found'`

#### `table`

[](#table-1)

KeyTypeDescription`headers``array`Table column headers. Key = field, Value = label`style``array`Table appearance settings (see table style below)##### `table.style`

[](#tablestyle)

KeyTypeDescription`lightColor``string`Color used for hover and stripes`width`, `height``string`Dimensions of the table. Ex: `'800px'``stickyHeader``bool`Enable sticky table header. Default: `false``hoverable``bool`Highlight rows on hover. Default: `true``striped``bool`Display zebra-stripes. Default: `false``bordered``bool`Add borders to cells. Default: `false``tableContainerClass`, `tableClass`, `theadClass`, `tbodyClass`, `trClass`, `thClass`, `tdClass``string`classes for styling the table layout#### `card`

[](#card)

KeyTypeDescription`cardHeader``array`Headers to display in mobile view`style``array`Styling classes for card layout in mobile view##### `card.style`

[](#cardstyle)

KeyTypeDescription`mTableClass`, `mTheadClass`, `mTbodyClass`, `mTrClass`, `mThClass`, `mTdClass``string`Mobile-specific table classes`cardClass`, `chClass`, `cdClass``string`Card container, header, and content classes#### `pagination`

[](#pagination-1)

KeyTypeDescription`limit``number`Max visible page links. Default: `5``style``array`Classes for pagination UI styling##### `pagination.style`

[](#paginationstyle)

KeyTypeDescription`containerClass``string`Wrapper class for pagination`itemClass``string`Pagination link classes`activeItemClass``string`Classes for the active page link`leftArrowClass``string`Left arrow icon/button class`rightArrowClass``string`Right arrow icon/button class---

Slots
-----

[](#slots-2)

SlotDescription`button`Add custom buttons to the top navigation`action`Slot for row-level action buttons inside the table. You have access to each `row` object.---

API
---

[](#api)

### Properties

[](#properties)

PropertyDescription`table`Access to the inner table component`pagination`Access to the inner pagination component### Methods

[](#methods)

MethodDescription`setData(data)`Load or update the component's dataset`setSearch(string)`Set search input manually via JavaScript`setPerPage(number)`Set number of items per page programmatically---

Example
-------

[](#example-32)

```

        Add User

        Edit

```

`$stm` Global Controller Object
===============================

[](#stm-global-controller-object)

The `$stm` object is a global controller that manages and interacts with all STM UI components via their APIs. It provides a unified way to control components dynamically.

---

📘 Overview
----------

[](#-overview)

`$stm` enables programmatic access to UI components by their IDs. It helps in managing state, visibility, and access to each registered component's API.

---

🔧 Available Methods
-------------------

[](#-available-methods)

- [component(id)](#componentid)
- [allComponents()](#allComponents)
- [open(id)](#openid)
- [close(id)](#closeid)
- [toggle(id)](#toggleid)
- [getState(id)](#getstateid)

### `component(id)`

[](#componentid)

Returns the API object of a component by its `id`.

```
const modal = $stm.component('myModal');
modal.open(); // Calls the open method of the component
```

### `allComponents()`

[](#allcomponents)

Returns an array of all registered component instances.

```
$stm.allComponents();
```

### `open(id)`

[](#openid)

Returns an array of all registered component instances.

```
$stm.open('model-1');
```

### `close(id)`

[](#closeid)

Returns an array of all registered component instances.

```
$stm.close('sidebar-1');
```

### `toggle(id)`

[](#toggleid)

Returns an array of all registered component instances.

```
$stm.toggle('dropdown-1');
```

### `getState(id)`

[](#getstateid)

Returns an array of all registered component instances.

```
$stm.getState('collapse-1');
```

> **Note:** If your component is nested or rendered conditionally, you must use Alpine.js's `$nextTick()` to ensure the component is fully loaded before invoking `$stm` methods.

```
$nextTick(() => {
    $stm.open('nestedModal');
});
```

Summary
-------

[](#summary)

- Use `$stm` for centralized component control.
- Always ensure components are mounted using `$nextTick()` in nested/conditional cases.
- Each component must have a unique `id` to interact with via `$stm`.

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance61

Regular maintenance activity

Popularity7

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity44

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 ~104 days

Total

5

Last Release

276d ago

Major Versions

v1.0.1 → v2.0.02025-06-17

### Community

Maintainers

![](https://www.gravatar.com/avatar/b30b659bfa556768f5d3be0d59e13d749665751424e9ec4ba0aece81b183e3d4?d=identicon)[djaker-hakim](/maintainers/djaker-hakim)

---

Top Contributors

[![djaker-hakim](https://avatars.githubusercontent.com/u/160321497?v=4)](https://github.com/djaker-hakim "djaker-hakim (40 commits)")

### Embed Badge

![Health badge](/badges/djaker-hakim-stm-ui-components/health.svg)

```
[![Health](https://phpackages.com/badges/djaker-hakim-stm-ui-components/health.svg)](https://phpackages.com/packages/djaker-hakim-stm-ui-components)
```

###  Alternatives

[mustache/mustache

A Mustache implementation in PHP.

3.3k44.6M291](/packages/mustache-mustache)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3871.2M](/packages/limenius-react-bundle)[symfony/ux-icons

Renders local and remote SVG icons in your Twig templates.

545.8M69](/packages/symfony-ux-icons)

PHPackages © 2026

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