https://github.com/muhsenmaqsudi/laratify

Laravel UI Components using TailwindCSS & AlpineJS
https://github.com/muhsenmaqsudi/laratify

laravel laravel-components laravel-package laravel-ui php ui ui-components

Last synced: 7 months ago
JSON representation

Laravel UI Components using TailwindCSS & AlpineJS

Host: GitHub
URL: https://github.com/muhsenmaqsudi/laratify
Owner: muhsenmaqsudi
License: mit
Created: 2020-04-22T17:29:32.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2023-02-01T19:39:31.000Z (over 3 years ago)
Last Synced: 2025-08-13T00:01:19.879Z (11 months ago)
Topics: laravel, laravel-components, laravel-package, laravel-ui, php, ui, ui-components
Language: HTML
Homepage: https://muhsenmaqsudi.github.io/laratify
Size: 496 KB
Stars: 15
Watchers: 1
Forks: 1
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Laratify

Laratify is a Laravel 7 package which includes essential components to make creating forms, table and custom ui's for your laravel blade base application a breeze. \
**This package requires Node.js to be installed in order to run npm commands and It Uses TailwindCSS as It's UI CSS styles, and it's backed with AlpineJS as it's javascript reactive power.**

Useful links:

- Support: [GitHub Issues](https://github.com/muhsenmaqsudi/laratify/issues)
- Contribute: [GitHub Pulls](https://github.com/muhsenmaqsudi/laratify/pulls)

## Installation

Require Laratify:

composer require muhsenmaqsudi/laratify

Publishing Vendor Assets

php artisan vendor:publish --tag="laratify-config"
php artisan vendor:publish --tag="laratify-views"

Add TailwindCSS & AlpineJS UI Preset Scaffolding

php artisan laratify:ui

With Authentication Scaffolding

php artisan laratify:ui --auth

Installing TailwindCSS & AlpineJS and compiling them

npm install && npm run dev

## Laratify Components

Laratify offers useful components to make building your app ui fast & easy. See below examples of each component.

Available Colors:

All of the default TailwindCSS color pallets are available for all the components where color matters.

`Black, White, Gray, Red, Orange, Yellow, Green, Teal, Blue, Indigo, Purple & Pink`

All the colors except Black & White comes with a 100 to 900 color shades that you can use like this `{color-name}-{shade-no}`

Alert:

```blade

Your alert message goes here

```

Badge:

```blade

Your text goes here

```

Button:

```blade

Button Title

```

- Note: available sizes: 'sm', 'md', 'lg'

Input:

```blade

```

- for disabling the input set `disabled` attributes, for readonly input set `readonly` attribute**
```blade

```

Checkbox:

```blade

```

- for disabling the checkbox set `disabled` attributes \
- checkbox attributes should have `boolean` migration columns.

Select:

```blade

```

- if the options are an associative array, the keys are used as the labels and the values as the values. For sequential arrays, the values are used for both the labels and values.
- :options="['option1', 'option2', 'option3']" => options with sequential array
- :options="[1 => 'option1', 2 => 'option2']" => options with associate array

File:

```blade

```

Textarea:

```blade

```

Radios:

```blade

```

- :options="['option1', 'option2', 'option3']" => options with sequential array
- :options="[1 => 'option1', 2 => 'option2']" => options with associate array

Dropdown:

```blade

```

- '|' is the separator in the drop down list, so use it when you want to separate links

Dialog:

```blade

Open Dialog

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aut enim eos error eveniet explicabo
ipsa ipsam laudantium minima nisi obcaecati omnis quam qui reprehenderit sapiente sunt, tenetur veniam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet blanditiis deserunt, dolore harum maxime nam
nulla quasi voluptate? Adipisci error illum laudantium magnam praesentium quibusdam sit ut. Dolor, dolore,
rem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam, autem corporis deserunt dolores ea
eligendi et impedit magni mollitia natus necessitatibus odio quae recusandae reiciendis sunt suscipit vel
voluptas?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias, aspernatur atque aut
consequuntur cumque deleniti distinctio dolorum et facere fugit iusto labore maxime nemo quam quas
repellendus, reprehenderit voluptatibus!

Save

```

Tooltip:

```blade
Element
Id

```

Available placements:

- top, bottom, right, left,
- {top,bottom,right,left}-start, {top,bottom,right,left}-end'

Note: **remember to put tooltip after the parent element**

Grids & Grid

```blade

```

Container, Col & Row

```blade

```
- flex options: initial,1,auto,none,grow,grow-0,shrink,shrink-0,
- order options: 1,2,3,4,5,6,7,8,9,10,11,12, first,last,none
- align-self options: auto, start, center, end, stretch
- flex-dir options: row, row-reverse, col, col-reverse
- align option: stretch, start, center, end, baseline (flex's align-items)
- justify options: start, center, end, between, around
- align-content options: start, center, end, between, around

Card

```blade

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem
ipsam
quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.
Deleniti
illo quod repellat.

Full name: Muhsen Maqsudi
Job Title: Backend Developer

```

Navbar

```blade

Your
Profile
Settings
Sign
out

```

Table

```blade

```

Tabs & Tab

```blade

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor odit rerum voluptatibus. Ad alias
aperiam beatae culpa delectus, dolor eligendi ipsam minus necessitatibus nihil numquam odit provident ut
vitae voluptatibus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam aut dicta dolore dolorem
eligendi expedita in ipsa, ipsum labore maiores porro ratione rem rerum sed sit tempora velit
voluptatum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, commodi, delectus dicta dignissimos
dolorum eaque error excepturi expedita nam neque non nulla praesentium quae quaerat quo rerum saepe
veritatis, voluptatum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam aut dicta dolore dolorem
eligendi expedita in ipsa, ipsum labore maiores porro ratione rem rerum sed sit tempora velit
voluptatum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, commodi, delectus dicta dignissimos
dolorum eaque error excepturi expedita nam neque non nulla praesentium quae quaerat quo rerum saepe
veritatis, voluptatum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, aliquam asperiores assumenda at corporis
cum dolor ea id, impedit ipsa laborum nobis obcaecati ratione rem reprehenderit, unde voluptatem
voluptatum. Quaerat!

```

Collapse

```blade

Collapse

```

## Package Config

For publishing package's config file run the bellow command

php artisan vendor:publish --tag="laratify-config"

```php
// app/config.php
return [
'text-base-color' => 'white', // changing the app text base color
'background-base-color' => 'blue-500' // changing the app background base color
];
```

## Packages Used

Composer packages:
- [laravel/ui](https://github.com/laravel/ui)

NPM packages:

- [tailwindcss](https://www.npmjs.com/package/tailwindcss)
- [@tailwindcss/custom-forms](https://www.npmjs.com/package/@tailwindcss/custom-forms)
- [laravel-mix-purgecss](https://www.npmjs.com/package/laravel-mix-purgecss)
- [laravel-mix-tailwind](https://www.npmjs.com/package/laravel-mix-tailwind)
- [alpinejs](https://www.npmjs.com/package/alpinejs)
- [tippyjs](https://github.com/atomiks/tippyjs)

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/muhsenmaqsudi/laratify

Awesome Lists containing this project

README