PHPackages                             ralphjsmit/tall-interactive - 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. [Utility & Helpers](/categories/utility)
4. /
5. ralphjsmit/tall-interactive

AbandonedArchivedLibrary[Utility & Helpers](/categories/utility)

ralphjsmit/tall-interactive
===========================

Create forms, modals and slide-overs with ease.

0.11.0(1y ago)11964.4k↓38.5%6MITPHPPHP ^8.0

Since Jan 7Pushed 1y ago5 watchersCompare

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

READMEChangelog (10)Dependencies (16)Versions (41)Used By (0)

[![tall-interactive](https://github.com/ralphjsmit/tall-interactive/raw/main/docs/images/tall-interactive.jpg)](https://github.com/ralphjsmit/tall-interactive/blob/main/docs/images/tall-interactive.jpg)

Create forms, modals and slide-overs with ease.
===============================================

[](#create-forms-modals-and-slide-overs-with-ease)

This package allows you to create beautiful forms, modals and slide-overs with ease. It utillises the great Filament Forms package for creating the forms and the awesome TALL-stack for the design.

Important

This package will only work for Filament V2 and Livewire V2. Since Filament V3, the better way to implement modals and slide-overs is by utilising the new [Filament Actions](https://filamentphp.com/docs/3.x/actions/installation).

[![Run tests](https://github.com/ralphjsmit/tall-interactive/actions/workflows/run-tests.yml/badge.svg?branch=main)](https://github.com/ralphjsmit/tall-interactive/actions/workflows/run-tests.yml)

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

[](#installation)

You can install the package via composer:

```
composer require ralphjsmit/tall-interactive
```

### Setup

[](#setup)

The package requires the **following dependencies**:

- Laravel Livewire
- Alpine.js
- Tailwind CSS
- Filament Forms
- Toast notification (not required, but very handy)

You can install them **manually** or skip to the [**Faster installation section**](#faster-installation) for new projects.

#### Laravel Livewire

[](#laravel-livewire)

Please follow the [**Laravel Livewire installation instructions**](https://laravel-livewire.com/docs/2.x/alpine-js#installation) if you haven't done so yet.

#### Alpine.js, Tailwind, Filament Forms

[](#alpinejs-tailwind-filament-forms)

Please follow the [**Filament Forms installation instructions**](https://filamentadmin.com/docs/2.x/forms/installation) to install Alpine.js, Tailwind CSS and Filament Forms.

Add the following to the `content` key of your `tailwind.config.js` file:

```
module.exports = {
    content: [
        './vendor/ralphjsmit/tall-interactive/resources/views/**/*.blade.php',
        // All other locations
    ],
///
```

#### Toast notifications

[](#toast-notifications)

Using the [Toast TALL notifications package](http://github.com/usernotnull/tall-toasts) is not required, but it is recommended if you need to send notifications to your users, for example on submitting a form.

If you decide to use Toast, please follow their [**setup instructions**](https://github.com/usernotnull/tall-toasts#setup).

#### Tall Interactive

[](#tall-interactive)

After installing the package and setting up the dependencies, **add the following code to your Blade** files so that it's **loaded on every page**. For example in your `layouts/app.blade.php` view:

```

```

**Now you're ready to go and build your first actionables!**

> #### Faster installation
>
> [](#faster-installation)
>
> If you want a faster installation process, you could check out my [ralphjsmit/tall-install](https://github.com/ralphjsmit/tall-install) package. This package provides you with a simple command that runs the installation process for all the above dependencies in a plain Laravel installation.
>
> It works like this:
>
> ```
> # First, create a new plain Laravel installation, for example with:
>
> laravel new name
> # OR: composer create-project laravel/laravel name
>
> # Next, require the `tall-install` package and run the `php artisan tall-install` command:
> composer require ralphjsmit/tall-install
> composer dump-autoload
> php artisan tall-install
> ```
>
>
>
> The `tall-install` command also has a few additional options you can use, like installing Pest, Browsersync and DDD. Please [check out the documentation](https://github.com/ralphjsmit/tall-install#installation--usage) for that.

Usage
-----

[](#usage)

You can build a **modal**, a **slide-over** or an **inline form** (together I call them 'actionables') with three things:

- With a **Filament Form**
- With a **Livewire component**
- With **custom Blade contents**

### Creating a Filament Form

[](#creating-a-filament-form)

To start **building our first actionable**, let's do some preparation first. Create a new file in your `app/Forms` directory (custom namespaces are also fine). You could call it `UserForm` or however you like.

Add the following contents to the file:

```