PHPackages                             ondrejmiko/laravel-breakpoint-badge - 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. [Utility & Helpers](/categories/utility)
4. /
5. ondrejmiko/laravel-breakpoint-badge

ActiveLibrary[Utility & Helpers](/categories/utility)

ondrejmiko/laravel-breakpoint-badge
===================================

Laravel package that shows the active Tailwind breakpoint and viewport width in local development.

v0.1.0(1mo ago)02MITPHPPHP ^8.0

Since Apr 12Pushed 1mo agoCompare

[ Source](https://github.com/OndrejMiko/laravel-breakpoint-badge)[ Packagist](https://packagist.org/packages/ondrejmiko/laravel-breakpoint-badge)[ RSS](/packages/ondrejmiko-laravel-breakpoint-badge/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (1)Dependencies (4)Versions (2)Used By (0)

Laravel Breakpoint Badge
========================

[](#laravel-breakpoint-badge)

A lightweight Laravel package that displays the current responsive breakpoint and viewport width directly in your app during development.

 [![Laravel Breakpoint Badge preview](.github/assets/screenshot.png)](.github/assets/screenshot.png)

Why use it?
-----------

[](#why-use-it)

When building responsive layouts, it is easy to lose track of the currently active breakpoint.

Laravel Breakpoint Badge gives you a small on-screen badge that shows the active breakpoint and optional viewport width directly inside your app while you work.

Features
--------

[](#features)

- Shows the active responsive breakpoint
- Optionally shows the current viewport width
- Designed for local development
- Simple Blade component usage
- Configurable position, theme, and z-index
- Tailwind-style breakpoint visibility

Demo
----

[](#demo)

### Static preview

[](#static-preview)

[![Static preview](.github/assets/preview.png)](.github/assets/preview.png)

### Responsive behavior

[](#responsive-behavior)

[![Responsive demo](.github/assets/demo.gif)](.github/assets/demo.gif)

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

[](#requirements)

- PHP 8.1+
- Laravel 9, 10, 11, 12, or 13

Installation
------------

[](#installation)

Install the package via Composer:

```
composer require ondrejmiko/laravel-breakpoint-badge
```

Basic usage
-----------

[](#basic-usage)

Render the badge anywhere in your main layout, usually near the end of the ``:

```

```

You can also override settings directly in the component:

```

```

Example output
--------------

[](#example-output)

The badge can display values like:

- `sm`
- `md`
- `lg`
- `xl`
- `2xl`

And optionally:

- `md · 824px`

Configuration
-------------

[](#configuration)

If you want to customize the package config, publish it:

```
php artisan vendor:publish --tag=breakpoint-badge-config
```

Default configuration:

```
return [
    'enabled' => env('BREAKPOINT_BADGE_ENABLED', app()->environment('local')),
    'position' => env('BREAKPOINT_BADGE_POSITION', 'center-top'),
    'theme' => env('BREAKPOINT_BADGE_THEME', 'auto'),
    'show_width' => env('BREAKPOINT_BADGE_SHOW_WIDTH', true),
    'z_index' => env('BREAKPOINT_BADGE_Z_INDEX', 9999),
];
```

### Supported positions

[](#supported-positions)

- `left-top`
- `center-top`
- `right-top`
- `left-bottom`
- `center-bottom`
- `right-bottom`

### Supported themes

[](#supported-themes)

- `auto`
- `light`
- `dark`

View publishing
---------------

[](#view-publishing)

If you want to customize the package view, publish it:

```
php artisan vendor:publish --tag=breakpoint-badge-views
```

Tailwind setup
--------------

[](#tailwind-setup)

The badge uses Tailwind utility classes for breakpoint visibility.

If your Tailwind config already scans vendor Blade views, no extra setup is needed.

If not, add the package view path to your Tailwind content configuration:

```
export default {
  content: [
    './resources/**/*.blade.php',
    './vendor/ondrejmiko/laravel-breakpoint-badge/resources/views/**/*.blade.php',
  ],
};
```

Alternatively, you can publish the package views and let Tailwind scan them from:

```
resources/views/vendor/breakpoint-badge
```

Recommended environment usage
-----------------------------

[](#recommended-environment-usage)

This package is intended primarily for local development.

Example:

```
BREAKPOINT_BADGE_ENABLED=true
BREAKPOINT_BADGE_POSITION=center-top
BREAKPOINT_BADGE_THEME=auto
BREAKPOINT_BADGE_SHOW_WIDTH=true
BREAKPOINT_BADGE_Z_INDEX=9999
```

Roadmap
-------

[](#roadmap)

- Custom breakpoint labels
- Custom breakpoint values
- Additional debug display options

Contributing
------------

[](#contributing)

Contributions, ideas, and improvements are welcome.

License
-------

[](#license)

MIT

###  Health Score

32

—

LowBetter than 70% of packages

Maintenance88

Actively maintained with recent releases

Popularity2

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity28

Early-stage or recently created project

 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

Unknown

Total

1

Last Release

58d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/0a519af47b7aa635d31795f09284a24181ad79f15dc83d750ead2f3f20f7058e?d=identicon)[OndrejMiko](/maintainers/OndrejMiko)

---

Top Contributors

[![OndrejMiko](https://avatars.githubusercontent.com/u/9248133?v=4)](https://github.com/OndrejMiko "OndrejMiko (3 commits)")

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/ondrejmiko-laravel-breakpoint-badge/health.svg)

```
[![Health](https://phpackages.com/badges/ondrejmiko-laravel-breakpoint-badge/health.svg)](https://phpackages.com/packages/ondrejmiko-laravel-breakpoint-badge)
```

###  Alternatives

[psalm/plugin-laravel

Psalm plugin for Laravel

3325.1M337](/packages/psalm-plugin-laravel)[livewire/flux

The official UI component library for Livewire.

9466.8M119](/packages/livewire-flux)[moonshine/moonshine

Laravel administration panel

1.3k239.9k72](/packages/moonshine-moonshine)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

719160.4k12](/packages/tallstackui-tallstackui)[webwizo/laravel-shortcodes

Wordpress like shortcodes for Laravel 11, 12 and 13

224685.2k8](/packages/webwizo-laravel-shortcodes)[grafite/forms

A remarkably magical form package for Laravel.

376.8k1](/packages/grafite-forms)

PHPackages © 2026

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