PHPackages                             neerajsohal/slate - 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. neerajsohal/slate

Abandoned → [electrik/slate](/?search=electrik%2Fslate)ArchivedLibrary[Templating & Views](/categories/templating)

neerajsohal/slate
=================

Tailwind CSS based UI kit for Laravel Blade

4294Blade

Since Sep 1Pushed 3y ago2 watchersCompare

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

READMEChangelogDependenciesVersions (2)Used By (0)

This repo has been moved to [electrikhq/slate](https://github.com/electrikhq/slate). Please use the new repo. This one is now read only.
========================================================================================================================================

[](#this-repo-has-been-moved-to-electrikhqslate-please-use-the-new-repo-this-one-is-now-read-only)

[![](https://camo.githubusercontent.com/7b6de0073c872ed91f72bd5ba6f9e791b80beb2ddd20727fb3215b4103c866ac/68747470733a2f2f6f70656e67726170682e6769746875626173736574732e636f6d2f6d61737465722f6e656572616a736f68616c2f736c617465)](https://camo.githubusercontent.com/7b6de0073c872ed91f72bd5ba6f9e791b80beb2ddd20727fb3215b4103c866ac/68747470733a2f2f6f70656e67726170682e6769746875626173736574732e636f6d2f6d61737465722f6e656572616a736f68616c2f736c617465)

Slate
=====

[](#slate)

Slate UI Kit is a set of beautiful anonymous blade components built using [tailwindcss](https://tailwindcss.com/) for your next [Laravel](https://laravel.com) project.

```
This package is under active development. Use responsibly!

```

[![Slate UI Application Shell Screenshot](https://camo.githubusercontent.com/bc772edf978682f14cc1ae5c4f35e3caa0cb2080cf66c6ee87b3c647fddb0120/68747470733a2f2f692e706f7374696d672e63632f44463846396646682f73637265656e73686f742d726f636b732e706e67 "Slate UI Application Shell Screenshot")](https://camo.githubusercontent.com/bc772edf978682f14cc1ae5c4f35e3caa0cb2080cf66c6ee87b3c647fddb0120/68747470733a2f2f692e706f7374696d672e63632f44463846396646682f73637265656e73686f742d726f636b732e706e67)

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

[](#requirements)

- PHP 7.4+
- Laravel 7+
- Tailwindcss

Slate UI kit is entirely dependent on Tailwind CSS. If you are using another CSS framework, conflicts may occur. It is not advised to use this kit with any other CSS framework

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

[](#installation)

**Start by installing the package using composer.**

```
composer require neerajsohal/slate
```

Many of our components have (and will have) placeholders for icons. For these icons, we use blade [blade-carbon-icons](https://github.com/codeat3/blade-carbon-icons). You may use other icon sets available here - [blade-icons](https://github.com/blade-ui-kit/blade-icons).

**Install Tailwind CSS**

```
npm install @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography --save-dev
```

Setup
-----

[](#setup)

In your Laravel's root tailwind.config.js file, require the plugins we installed as shown below:

```
{
...
plugins: [
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
...
}
```

Next, your should define the a color scheme for your project:

```
{
...
theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
            fontFamily: {
                sans: ['Inter', ...fontFamily.sans],
            },
        },
    },
...
}
```

Your final tailwind.config.js should look like this:

```
const colors = require('tailwindcss/colors')
const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
    purge: [
        './resources/**/*.blade.php',
        './vendor/neerajsohal/slate/resources/views/components/**/*.blade.php',
    ],
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
            fontFamily: {
                sans: ['Inter', ...fontFamily.sans],
            },
        },
    },
    plugins: [
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}
```

Start Using
-----------

[](#start-using)

Once installed you can start using the UI kit in your Laravel views.

For example, for badge using the following will generate badges

```
xs badge
small badge
large badge
```

[![badges](https://camo.githubusercontent.com/5031e80680b343d4c5a07534568a3c07aa94850c36bd40f32ea2c54e81753309/68747470733a2f2f692e706f7374696d672e63632f7a587134303131642f53637265656e73686f742d323032312d31322d32322d61742d31322d32392d34312e706e67)](https://camo.githubusercontent.com/5031e80680b343d4c5a07534568a3c07aa94850c36bd40f32ea2c54e81753309/68747470733a2f2f692e706f7374696d672e63632f7a587134303131642f53637265656e73686f742d323032312d31322d32322d61742d31322d32392d34312e706e67)

###  Health Score

19

—

LowBetter than 10% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity27

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.

### Community

Maintainers

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

---

Top Contributors

[![neerajsohal](https://avatars.githubusercontent.com/u/88097?v=4)](https://github.com/neerajsohal "neerajsohal (54 commits)")

---

Tags

bladeblade-templatelaraveltailwind-uitailwindcssui-componentsui-kituikit

### Embed Badge

![Health badge](/badges/neerajsohal-slate/health.svg)

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

###  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)