PHPackages                             rapidez/blade-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. rapidez/blade-components

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

rapidez/blade-components
========================

Collection of awesome Blade Components, used by Rapidez

2.0.1(1mo ago)248.3k↓40.2%3[1 PRs](https://github.com/rapidez/blade-components/pulls)1GPL-3.0-or-laterBladePHP ^8.1CI passing

Since Nov 26Pushed 1mo ago4 watchersCompare

[ Source](https://github.com/rapidez/blade-components)[ Packagist](https://packagist.org/packages/rapidez/blade-components)[ Docs](https://github.com/rapidez/blade-components)[ RSS](/packages/rapidez-blade-components/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (10)Versions (27)Used By (1)

Rapidez Blade Components
========================

[](#rapidez-blade-components)

This package includes some Tailwind CSS styled Blade components, the components do not need or require Rapidez. This package is only used within Rapidez by default, but **can be used in any Laravel project**.

- [Input](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/input.blade.php)
- [Checkbox](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/checkbox/checkbox.blade.php)
- [Radio](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/radio/radio.blade.php)
- [Select](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/select/select.blade.php)
- [Textarea](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/textarea/textarea.blade.php)
- [Label](https://github.com/rapidez/blade-components/blob/master/resources/views/components/label/label.blade.php)
- [Accordion](https://github.com/rapidez/blade-components/blob/master/resources/views/components/accordion/accordion.blade.php)
- [Buttons](#buttons)
- [Prose](https://github.com/rapidez/blade-components/blob/master/resources/views/components/prose/prose.blade.php)
- [Slideover](https://github.com/rapidez/blade-components/blob/master/resources/views/components/slideover/slideover.blade.php)
- [Slideover (mobile only)](https://github.com/rapidez/blade-components/blob/master/resources/views/components/slideover/mobile.blade.php)
- [Readmore](https://github.com/rapidez/blade-components/blob/master/resources/views/components/readmore/readmore.blade.php)

The idea with these components is to have a good starting point and centralized styling. Most of the components use a [Anonymous Index](https://laravel.com/docs/master/blade#anonymous-index-components), this way you have a default and variants can be added next to it. We're using the (currently undocumented) [component name guessing](https://github.com/laravel/framework/pull/52669) here.

We don't provide a input + label combination component as you'll end up with attribute merging issues. We can't guess where the attribute should go; the input or the label. We could provide a 99% use case but you'll eventually end up with exceptions and complexity within the components. But; we do provide it for the checkbox and radio as you can see within those components. If you don't need the label you can use the `base` component as you can find within the examples.

[![](.github/media/screenshot.png)](https://rapidez.github.io/blade-components/demo/components.html)

The base button doesn't have any styling; here, we only use the `x-rapidez::tag`. All other buttons use the `button/button`, which contains the basic styling for buttons, such as padding, hover effects, and the disabled state. The button variants contain styling for the background and text color. There is only one exception: the `button/slider`, which has more custom styling than the other button variants.

[![](.github/media/buttons.png)](.github/media/buttons.png)

- [Base](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/base.blade.php)
- [Default](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/button.blade.php)
- [Primary](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/primary.blade.php)
- [Secondary](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/secondary.blade.php)
- [Outline](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/outline.blade.php)
- [Conversion](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/conversion.blade.php)
- [Slider](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/slider.blade.php)

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

[](#installation)

```
composer require rapidez/blade-components

```

And include the CSS file in your `resources/css/app.css`:

```
@import '../../vendor/rapidez/blade-components/resources/css/package.css';

```

If you're not using Tailwind yet, you've to make sure you've setup Tailwind 4 with these plugins:

- [Forms](https://github.com/tailwindlabs/tailwindcss-forms)
- [Typography](https://github.com/tailwindlabs/tailwindcss-typography)

A minimal setup can be found in this repos `app.css`, `package.json` and `vite.config.js`.

More information about the usage and variables can be found in the Rapidez docs:

### Views

[](#views)

If you like to change the components you can publish the views with:

```
php artisan vendor:publish --tag=rapidez-blade-components-views

```

### Read more component

[](#read-more-component)

The [readmore component](https://github.com/rapidez/blade-components/blob/master/resources/views/components/readmore/readmore.blade.php) includes some Javascript, we're using a [Blade Stack](https://laravel.com/docs/master/blade#stacks) named `foot` for that. Make sure you've an `@stack('foot')` before your closing `` tag. Within Rapidez this is already present within the [`layouts/app.blade.php`](https://github.com/rapidez/core/blob/master/resources/views/layouts/app.blade.php).

Usage
-----

[](#usage)

Just like any other Blade component, check out the [Laravel Blade docs](https://laravel.com/docs/master/blade) and the examples within the components code linked above. All components are prefixed with `x-rapidez::` to avoid any conflicts with existing Blade components within your project.

### Basic examples

[](#basic-examples)

#### Input with a label

[](#input-with-a-label)

```

    Something

```

#### Checkbox

[](#checkbox)

```

    @lang('Translatable label')

```

#### Prose

[](#prose)

```

    Content

```

#### Accordion

[](#accordion)

```

    Title

        Collapsable content goes here

```

#### Slideover

[](#slideover)

```

    Open Slideover

    Your slideover content goes here

```

Make sure to add this class to your body tag to prevent scrolling when the slideover is open:

```

```

#### Tag

[](#tag)

It is a Blade version of a [dynamic Vue component](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)

##### Usage

[](#usage-1)

```

    Something

```

which will result in

```

    Something

```

Changing components
-------------------

[](#changing-components)

If you like to change the components you can publish the views with:

```
php artisan vendor:publish --tag=rapidez-blade-components-views

```

Preview
-------

[](#preview)

There is a preview Blade file included with all the components, to view that in your project you could register a route for it within `routes/web.php` and visit the `/components` route from your browser:

```
Route::view('components', 'rapidez::components-preview');
```

Development
-----------

[](#development)

When you're working on this package you should first install the frontend dependencies with `yarn`, create an initial build with `yarn build`, symlink the public build with `yarn symlink-public` and to show a preview in the browser use `yarn preview`.

License
-------

[](#license)

GNU General Public License v3. Please see [License File](LICENSE) for more information.

###  Health Score

53

—

FairBetter than 97% of packages

Maintenance88

Actively maintained with recent releases

Popularity35

Limited adoption so far

Community21

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 64.3% 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

Recently: every ~55 days

Total

23

Last Release

59d ago

Major Versions

1.x-dev → 2.0.02026-03-17

PHP version history (3 changes)1.0.0PHP ^8.1|^8.2

1.8.0PHP ^8.1|^8.2|^8.3|^8.4

1.9.0PHP ^8.1

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/72222911?v=4)[Rapidez](/maintainers/rapidez)[@rapidez](https://github.com/rapidez)

---

Top Contributors

[![royduin](https://avatars.githubusercontent.com/u/1703233?v=4)](https://github.com/royduin "royduin (45 commits)")[![Roene-JustBetter](https://avatars.githubusercontent.com/u/85165259?v=4)](https://github.com/Roene-JustBetter "Roene-JustBetter (15 commits)")[![JimmyHoenderdaal](https://avatars.githubusercontent.com/u/101801301?v=4)](https://github.com/JimmyHoenderdaal "JimmyHoenderdaal (4 commits)")[![jordythevulder](https://avatars.githubusercontent.com/u/28647869?v=4)](https://github.com/jordythevulder "jordythevulder (3 commits)")[![FinnPaes](https://avatars.githubusercontent.com/u/71390226?v=4)](https://github.com/FinnPaes "FinnPaes (1 commits)")[![Jade-GG](https://avatars.githubusercontent.com/u/32514269?v=4)](https://github.com/Jade-GG "Jade-GG (1 commits)")[![indykoning](https://avatars.githubusercontent.com/u/15870933?v=4)](https://github.com/indykoning "indykoning (1 commits)")

---

Tags

blade-componentsrapidez

### Embed Badge

![Health badge](/badges/rapidez-blade-components/health.svg)

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

###  Alternatives

[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[developermithu/tallcraftui

TallCraftUI is a Laravel blade UI components library built on TALL stack

1672.4k](/packages/developermithu-tallcraftui)[mkocansey/bladewind

Laravel UI Components using TailwindCSS, Blade Templates and vanilla Javascript

680109.4k](/packages/mkocansey-bladewind)[cagilo/cagilo

A set of open-source Blade components for the Laravel Framework

172996.5k](/packages/cagilo-cagilo)[pressbooks/pressbooks

Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS.

44643.1k1](/packages/pressbooks-pressbooks)[wireui/heroicons

The Tailwind Heroicons for laravel blade by WireUI

43390.8k5](/packages/wireui-heroicons)

PHPackages © 2026

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