PHPackages                             windsondias/laravel-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. windsondias/laravel-components

ActiveLibrary

windsondias/laravel-components
==============================

A laravel package with tailwind and alpine components

v0.1.5(2y ago)2141MITBlade

Since Nov 18Pushed 2y ago1 watchersCompare

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

READMEChangelog (6)Dependencies (1)Versions (7)Used By (0)

Laravel's components with TailwindCss and AlpineJs
--------------------------------------------------

[](#laravels-components-with-tailwindcss-and-alpinejs)

#### To use this package, you must have TailwindCss and AlpineJs installed in the project.

[](#to-use-this-package-you-must-have-tailwindcss-and-alpinejs-installed-in-the-project)

#### The icon library used in the package is remixicon.com

[](#the-icon-library-used-in-the-package-is-remixiconcom)

### Installation

[](#installation)

Use the composer command:

```
composer require windsondias/laravel-components

```

Include the code below in your tailwind.config.js:

```
safelist: [
    {
        pattern: /(bg|border|text)-(primary|secondary|tertiary|success|error|warning|info)-(100|200|300|400|500)/,
        variants: ['sm', 'md', 'lg', 'xl', 'dark', 'hover', 'focus'],
    },
],

theme: {
    extend: {
        colors: {
            primary: {
                100: '#bfdbfe',
                200: '#93c5fd',
                300: '#60a5fa',
                400: '#3b82f6',
                500: '#2563eb',
            },
            secondary: {
                100: '#e5e7eb',
                200: '#d1d5db',
                300: '#9ca3af',
                400: '#6b7280',
                500: '#4b5563',
            },
            tertiary: {
                100: '#a1a1aa',
                200: '#71717a',
                300: '#52525b',
                400: '#3f3f46',
                500: '#27272a',
            },
            success: {
                100: '#bbf7d0',
                200: '#86efac',
                300: '#4ade80',
                400: '#4ade80',
                500: '#16a34a',
            },
            error: {
                100: '#fecaca',
                200: '#fca5a5',
                300: '#f87171',
                400: '#ef4444',
                500: '#dc2626',
            },
            warning: {
                100: '#fef08a',
                200: '#fde047',
                300: '#facc15',
                400: '#eab308',
                500: '#ca8a04',
            },
            info: {
                100: '#a5f3fc',
                200: '#67e8f9',
                300: '#22d3ee',
                400: '#06b6d4',
                500: '#0891b2',
            },
        }
    },
},

```

It is also necessary to add the relative path to the package folder in tailwind.config.js within the content key, starting from the vendor folder:

```
content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./vendor/windsondias/laravel-components/**/*.blade.php",
],

```

After this configuration, only the sidebar and navbar components will not work, as they depend on the use of the layout available with the components.

To use the layout, first publish the package files using the command:

```
php artisan vendor:publish

```

Search for the provider:

```
Provider: WindsonDias\Components\ComponentServiceProvider

```

The files will be published in the folder: resources/views/vendor/components/components

Copy the layout folder into your structure, necessarily in the blade components folder, usually resources/views/components

Change the path to the navbar and sidebar components in the main file for the two components copied to your structure

### Example

[](#example)

From

```

```

To

```

```

Within these components you will find a basis for how they work. After that, simply install the main file as a layout for your application and use

###  Health Score

20

—

LowBetter than 14% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity37

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

Every ~0 days

Total

6

Last Release

904d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/36202bb838f99826bfd727de5e278107ef22db7b3c5976a33e343f597b9986c9?d=identicon)[windson.dias](/maintainers/windson.dias)

---

Top Contributors

[![windsondias](https://avatars.githubusercontent.com/u/57019436?v=4)](https://github.com/windsondias "windsondias (30 commits)")

### Embed Badge

![Health badge](/badges/windsondias-laravel-components/health.svg)

```
[![Health](https://phpackages.com/badges/windsondias-laravel-components/health.svg)](https://phpackages.com/packages/windsondias-laravel-components)
```

###  Alternatives

[fumeapp/modeltyper

Generate TypeScript interfaces from Laravel Models

196277.9k](/packages/fumeapp-modeltyper)[aedart/athenaeum

Athenaeum is a mono repository; a collection of various PHP packages

255.2k](/packages/aedart-athenaeum)

PHPackages © 2026

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