PHPackages                             xirelogy/velo - 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. xirelogy/velo

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

xirelogy/velo
=============

Velo blade components

0.1.21(4y ago)031MITJavaScriptPHP ^7.0|^8.0

Since Feb 12Pushed 4y ago1 watchersCompare

[ Source](https://github.com/xirelogy/velo)[ Packagist](https://packagist.org/packages/xirelogy/velo)[ RSS](/packages/xirelogy-velo/feed)WikiDiscussions master Synced 6d ago

READMEChangelog (10)DependenciesVersions (23)Used By (0)

Velo blade components library
=============================

[](#velo-blade-components-library)

### Introduction

[](#introduction)

Velo provides blade components that can be used to tag HTML elements independent of its theme. Purpose is to make customizing and theming more available. Velo by default ships with a bootstrap theme that is uses Bootstrap 4.6 (at the time of writing).

### Using from composer

[](#using-from-composer)

- Using velo from composer: ```
    composer require xirelogy/velo

    ```

### Using velo

[](#using-velo)

- The velo template can be invoked using: ```
    @extends('velo::templates.mobile')

    ```
- The provider for velo theme can be configured from `config('view.velo.bridge')`
    - Bootstrap is provided from the class: `Xirelogy\Velo\Bootstrap\Bridge`
    - CSS providing the bootstrap styles can be configured from: ```
        config('view.velo.bootstrap.css') // URL to the bootstrap CSS
        config('view.velo.bootstrap.css_integrity') // The integrity of the bootstrap CSS, optional

        ```
- Velo provides CSS classes starting with the `velo-` prefix but must be included in your project's relevant style files written is SASS: ```
    @import "vendor/xirelogy/velo/resources/sass/velo-common";
    ```

### Supported components

[](#supported-components)

##### Alert (`x-velo::container.alert`)

[](#alert-x-velocontaineralert)

- An alert frame containing alert messages (eg. Bootstrap's Alert component).
- Use the attribute `x-type` to specify the alert type (Supported values: `primary`, `secondary`, `success`, `danger`, `warning`, `info`).
- Use the attribute `x-close-button` (without value) to indicate a close button is required.

##### Breadcrumb (`x-velo::container.breadcrumb`)

[](#breadcrumb-x-velocontainerbreadcrumb)

- A breadcrumb container for multiple breadcrumb items.
- Should contain items of `x-velo::tag.breadcrumb-item`.

##### Breadcrumb item (`x-velo::tag.breadcrumb-item`)

[](#breadcrumb-item-x-velotagbreadcrumb-item)

- A breadcrumb item is a child item within a breadcrumb container.
- Use the attribute `x-active` (without value) to indicate that the item is active.

##### Button (`x-velo::control.button`)

[](#button-x-velocontrolbutton)

- A button is a clickable control.
- Use the attribute `x-type` to specify the button type (Supported values: `primary`, `secondary`, `success`, `danger`, `warning`, `info`).
- Use the attribute `x-outline` (without value) to indicate that the button is a outline button.
- Use the attribute `x-action` to specify the button's action type (Default is `button`).
- Use the attribute `x-parent` to specify the button's parent (Supported values: `nav-bar`).
- Use the data `busy` (attribute `data-busy`) to specify a text that can be used when button is busy.

##### Card (`x-velo::container.card`)

[](#card-x-velocontainercard)

- A card frame with possible title (eg. Bootstrap's Card component).
- Card header can be specified in the `header` slot.
- Card title can be specified in the `title` slot.
- Card footer can be specified in the `footer` slot.
- Use the attribue `x-header-class` for specifying additional classes for the card header.
- Use the attribue `x-title-class` for specifying additional classes for the card title.
- Use the attribue `x-body-class` for specifying additional classes for the body.
- Use the attribue `x-footer-class` for specifying additional classes for the card footer.

##### Check box (`x-velo::control.check-box`)

[](#check-box-x-velocontrolcheck-box)

- A check box is a control with 'check' or 'uncheck' status.
- The corresponding content relevant to the check box is specified in it's main slot.

##### Data (`x-velo::container.data`)

[](#data-x-velocontainerdata)

- A container for key-value data display.
- Should be used in conjuction of data entry, data key, data value tags.
- Example: ```

        Key #1
        Value #1

        Key #2
        Value #2

    ```

##### Dialog (`x-velo::container.dialog`)

[](#dialog-x-velocontainerdialog)

- A modal dialog frame with possible title and footer (eg. Bootstrap's Modal component).
- Dialog title can be specified in the `title` slot.
- Dialog footer can be specified in the `footer` slot.
- Use the attribute `x-close-button` (without value) to indicate a close button is required.
- Use the attribute `x-vertical-align` (without value) to align the dialog vertically.
- Use the attribute `x-scroll-content` (without value) to indicate that the content of the dialog can scroll if exceeds frame size.
- Use the attribute `x-header-class` to specify additional classes for the dialog header.
- Use the attribute `x-footer-class` to specify additional classes for the dialog footer.

##### Form group (`x-velo::container.form-group`)

[](#form-group-x-velocontainerform-group)

- A form group indicates a section of input in a form.
- The associated label for the input can be specified in the `label` slot.
- Content for succeeded validation can be specified in the `validateSucceed` slot.
- Content for failed validation can be specified in the `validateFailed` slot.

##### Full page (`x-velo::container.full-page`)

[](#full-page-x-velocontainerfull-page)

- A full page occupies the full width and height of the page, without any margin or padding, and does not support scrolling.
- The purpose of full page is to lock the contents of a 'page' within it's content without causing undesired scrolling or side effects.

##### Input (`x-velo::control.input`)

[](#input-x-velocontrolinput)

- An input corresponds to the various input as in HTML.

##### Input group (`x-velo::container.input-group`)

[](#input-group-x-velocontainerinput-group)

- An input group is a input with possible prefix/suffix static content (eg. Bootstrap's Input group component).
- Example: ```

      Email

      @example.com

    ```
- The input prefix/suffix may specify the attribute `x-target` to specify the target type contained (Currently `button` supported).

##### Tags input (`x-velo::control.input-tags`)

[](#tags-input-x-velocontrolinput-tags)

- A specialized input for editing tags separated by separators.
- The separator is comma (,) by default and can be specified using `data-separator`.

##### Loading (`x-velo::loading`)

[](#loading-x-veloloading)

- Loading shows an indicator that loading is in progress.
- Use the attribute `x-type` to select the type of loading to be displayed (Currently `spin` and `grow` supported, `spin` is the default).
- Use the attribute `x-parent` to specify that the loading is used in specific context (Currently `button` supported).

##### Nav bar (`x-velo::container.nav-bar`)

[](#nav-bar-x-velocontainernav-bar)

- A navigation bar is a bar for page navigation purpose normally placed on top of a page.
- Use the attribute `x-foreground` to specify the foreground theme (e.g. `light`, `dark`).
- Use the attribute `x-background` to specify the background theme (e.g. `light`, `dark`).

##### Page (`x-velo::container.page`)

[](#page-x-velocontainerpage)

- A page is a container for the main page content.
- Use the attribute `x-full-x` (without value) to specify the page to take the full width.
- Use the attribute `x-full-y` (without value) to specify the page to take the full height.

##### Paginator (`x-velo::container.paginator`)

[](#paginator-x-velocontainerpaginator)

- A paginator is a container to navigate between multiple pages.
- Should contain items of `x-velo::tag.paginator-item`.

##### Paginator item (`x-velo::tag.paginator-item`)

[](#paginator-item-x-velotagpaginator-item)

- A paginator item is an item within a paginator container.
- Use the attribute `x-type` to specify special item types (`prev` for 'previous page', `next` for 'next page' and `more` for the ellipsis).
- Use the attribute `x-active` (without value) to indicate that the item is active.
- Use the attribute `x-disabled` (without value) to indicate that the item is disabled.

##### Pop menu (`x-velo::container.pop-menu`)

[](#pop-menu-x-velocontainerpop-menu)

- A pop menu is a container for a pop-up menu.

##### Pop menu item (`x-velo::tag.pop-menu-item`)

[](#pop-menu-item-x-velotagpop-menu-item)

- A pop menu item is an item under a pop menu container.
- Use the attribute `x-header` (without value) to specify the current item is of header style.
- Use the attribute `x-divider` (without value) to specify the current item is a divider.
- Use the attribute `x-disabled` (without value) to specify the current item is disabled.
- Use the attribute `x-href` to specify the current item is a link (to the href target specified in the attribute).

##### Popup (`x-velo::container.popup`)

[](#popup-x-velocontainerpopup)

- A popup is a pop content container.
- Popup title can be specified in the `title` slot.

##### Radio (`x-velo::control.radio`)

[](#radio-x-velocontrolradio)

- A radio is a control with 'selected' or 'unselected' status.
- The corresponding content relevant to the radio button is specified in it's main slot.

##### Select (`x-velo::control.select`)

[](#select-x-velocontrolselect)

- A select is a control with multiple options for selection, as in HTML.
- Available options are specified in it's corresponding `` tags.

##### Tab bar (`x-velo::control.tab-bar`)

[](#tab-bar-x-velocontroltab-bar)

- A tab bar is a container control consisting of tab items.
- Should contain items of `x-velo::control.tab-item`.

##### Tab item (`x-velo::control.tab-item`)

[](#tab-item-x-velocontroltab-item)

- A tab item is a control item representing a single tab.
- Use the attribute `x-active` (without value) to indicate that the tab item is active.
- Use the attribute `x-disabled` (without value) to indicate that the tab item is disabled.

##### Text area (`x-velo::container:textarea`)

[](#text-area-x-velocontainertextarea)

- A text area corresponds to a (normally) multi-row input as in HTML.

##### Thumbnail (`x-velo::thumbnail`)

[](#thumbnail-x-velothumbnail)

- A thumbnail element for an image
- Use the attribute `data-src` to specify the image source.

##### Toast (`x-velo::container.toast`)

[](#toast-x-velocontainertoast)

- A toast is a frame for showing toast notification message (eg. Bootstrap's Toast component).
- Toast title can be specified in the `title` slot.
- Use the attribute `x-close-button` (without value) to indicate a close button is required.

### Javascript library

[](#javascript-library)

Velo provides some accompanying Javascripts so that dynamic rendering and client side interaction is possible.

- Please include dependency to `@xirelogy/xw` manually in your project.
- The javascripts are provided in each individual modules and should be imported into where it should be used.

#### Additional Javascript library

[](#additional-javascript-library)

When using Bootstrap customization, the following additional Javascript dependency is required:

- `@popperjs/core`

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity57

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

Total

22

Last Release

1476d ago

PHP version history (2 changes)0.1PHP ^7.0

0.1.13PHP ^7.0|^8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/b7960b5715a588a7cb3938b4626d62270bb86755cffef339825ffd2b2e69d11d?d=identicon)[xirelogy](/maintainers/xirelogy)

---

Top Contributors

[![xirelogy](https://avatars.githubusercontent.com/u/8720300?v=4)](https://github.com/xirelogy "xirelogy (76 commits)")

### Embed Badge

![Health badge](/badges/xirelogy-velo/health.svg)

```
[![Health](https://phpackages.com/badges/xirelogy-velo/health.svg)](https://phpackages.com/packages/xirelogy-velo)
```

###  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)[nicmart/string-template

StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions.

2101.7M30](/packages/nicmart-string-template)

PHPackages © 2026

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