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

3294Blade

Since Sep 1Pushed 3y ago1 watchersCompare

[ Source](https://github.com/neerajsohal/slate)[ Packagist](https://packagist.org/packages/neerajsohal/slate)[ RSS](/packages/neerajsohal-slate/feed)WikiDiscussions master Synced 1w 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 9% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community7

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.

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

[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3841.2M](/packages/limenius-react-bundle)[pdewit/nova-external-url

An external URL Laravel Nova field.

30383.2k](/packages/pdewit-nova-external-url)[wbrowar/guide

A CMS Guide for Craft CMS.

6154.7k1](/packages/wbrowar-guide)[localgovdrupal/localgov_base

The base theme for LocalGov Drupal websites.

13126.9k5](/packages/localgovdrupal-localgov-base)

PHPackages © 2026

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