PHPackages                             vojislavd/tall-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. vojislavd/tall-components

ActiveLibrary

vojislavd/tall-components
=========================

TALL components

v1.0.1(2y ago)5361MITPHPPHP ^8.2

Since Feb 8Pushed 2y ago1 watchersCompare

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

READMEChangelog (8)Dependencies (3)Versions (9)Used By (0)

TALL components
===============

[](#tall-components)

Library of useful UI components created for TALL (Tailwind CSS, Alpine.js, Laravel, Livewire) stack.

Include:

- [Modal](#modal)
- [Confirmation modal](#confirmation-modal)
- [Notification](#notification)
- [Table (search, filters, sort columns)](#table)
- [Loading spinner](#loading-spinner)
- [Drag & drop file upload (Filepond)](#drag--drop-file-upload-filepond)
- [Markdown editor (Quill)](#markdown-editor-quill)
- [Datetime picker (Flatpickr)](#datetime-picker-flatpickr)

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

[](#requirements)

This package requires having installed and working Laravel, Tailwind CSS, Alpine.js and Livewire.

The package is created and tested for these frameworks:

- Laravel v10
- Tailwind CSS v3
- Alpine.js v3
- Livewire v3

There can be some differences for other versions.

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

[](#installation)

You can install the package via composer:

```
composer require vojislavd/tall-components
```

You need to include `tc.js` in your `resources/js/app.js` file:

```
import './../../vendor/vojislavd/tall-components/resources/js/tc.js'
```

Next, you should compile assets:

```
npm install && npm run build
```

Components will use `primary`, `primary-dark`, `secondary` and `secondary-dark` colors. You should configure these colors in your `tailwind.config.js` file.

If you want to change colors or customize anything else, you can publish all components views with:

```
php artisan vendor:publish --tag="tall-components-views"
```

To change colors, just find `primary`, `primary-dark`, `secondary` or `secondary-dark` in the component and replace them with color you want to use.

Usage
-----

[](#usage)

### Modal

[](#modal)

[![](https://github.com/VojislavD/tall-components/assets/23532087/fbbdfe85-957b-4ff0-82c5-8eaa6f99f109)](https://github.com/VojislavD/tall-components/assets/23532087/fbbdfe85-957b-4ff0-82c5-8eaa6f99f109)

To use modal, you need have boolean variable inside your Livewire component. Modal will be opened or closed based on the value of that variable.

```