DOCSEARCHbyAlgolia
Submit Docs

Inertia UI

website·Indexed 32 days ago

https://inertiaui.com/

A suite of components for Laravel and Inertia.js, including Inertia Table (an Eloquent-powered table component), Inertia Forms, and Inertia Modal. Features include advanced filtering, sorting, bulk actions, exporting to CSV/Excel/PDF, and support for both Vue 3 and React 19.

Tokens
125.3K
Snippets
690
Records
763
Agent score
66%

What's inside Inertia UI

  1. Overview of Inertia Modal features

    Inertia Modal is a suite for Laravel, Inertia.js, and Tailwind CSS that enables opening any route in a Modal or Slideover without modifying existing routes or controllers. Key features include support for React and Vue, zero backend configuration, nested/stacked modals, prefetch support, native HTML dialog accessibility, and TypeScript definitions.

    Version Compatibility: Inertia Modal 3.x requires Inertia.js v3. For Inertia.js v2, use Inertia Modal 2.x.

  2. Overview of Inertia Modal features

    v0
    Inertia Modal is a suite for Laravel, Inertia.js, and Tailwind CSS that enables opening any route in a Modal or Slideover without modifying existing routes or controllers. Key features include support for React and Vue, zero backend configuration, nested/stacked modals, headless support, reusable modals, and the ability to reload props within modals.

  3. Overview of Inertia Table features

    Inertia Table is a commercial component for Laravel and Inertia.js that converts a PHP class into an interactive data table. Key features include:

    • Sorting and searching (including support for related Eloquent models)
    • Pagination with customizable items per page
    • Column management: toggleable, sticky columns, and sticky headers
    • Filtering: text, date, boolean, and set filters
    • Actions: row-level and bulk actions with customizable confirmation dialogs
    • Exports: CSV, Excel, and PDF (via Laravel Excel), with support for queued exports for large datasets
    • UI Support: Dark mode, RTL support, and customizable empty states
    • Frontend Compatibility: Full feature parity for Vue 3.4+ and React 19+

  4. Overview of InertiaUI Display Helpers

    Display helpers are lightweight components used to render PHP-authored context (headings, instructions, separators, and notices) inside auto-rendered forms. They are not a general UI kit and are specifically intended for form-scoped content. All display helpers have a null name and are automatically excluded from Form::data().

  5. Overview of Inertia Modal features

    v2
    Inertia Modal is a frontend package for Laravel, Inertia.js, and Tailwind CSS (supporting React and Vue) that enables opening any route in a Modal or Slideover without modifying existing routes or controllers. Key features include: zero backend configuration, support for nested/stacked modals, prefetch support for faster loading, native HTML dialog support for accessibility, TypeScript definitions, and the ability to pass props to local modals.

  6. Overview of Inertia Forms

    Inertia Forms is a suite of packages for Laravel, Inertia.js, and Tailwind CSS that allows developers to define form structures entirely in PHP. The PHP Form class serializes the form definition into a JSON-friendly array, which is passed as a prop to an Inertia page and rendered by a corresponding frontend component (@inertiaui/form-vue or @inertiaui/form-react). This workflow automates validation, error handling, and submission wiring.

  7. Optimize table data fetching with Partial Reloads

    Inertia Table leverages Inertia.js partial reloads to ensure that actions like filtering, sorting, or paginating only refetch the table data rather than every prop on the page. This reduces data transfer and improves response times.

  8. Enable AI-assisted coding for Inertia Modal using Laravel Boost

    Laravel Boost provides AI coding agents (such as Cursor, Claude Code, GitHub Copilot, and PhpStorm) with a specific 'skill' containing guidance on Inertia Modal. This helps agents understand how to implement modal responses, handle nested/stacked modals, manage prop loading, and use headless mode. Boost is a development-time tool and is not required for the application to run in production.

  9. System requirements for Inertia Table v4.x

    Ensure your project meets the following minimum version requirements for Inertia Table v4.x:

    • Laravel: 12 or 13
    • Inertia Laravel: v2 or v3
    • Inertia.js: v2 or v3
    • React: 19+
    • Vue: 3.4+
    • Inertia UI Modal: v2 or v3

  10. Install Inertia Modal frontend packages via NPM

    v0
    If you prefer not to use Composer for the frontend, you can install the framework-specific packages separately. Note that you will be responsible for managing version synchronization between the frontend and backend.
    # For Vue
npm install @inertiaui/modal-vue

# For React
npm install @inertiaui/modal-react

  11. Implement string tokens with Combobox

    The tokens() method transforms the field into a tag-like input where the submitted value is an array of strings. Suggestions are provided via options().

    • Custom Tokens: Allowed by default.
    • Suggestions Only: Set allowCustomValues(false) to restrict input to the suggestion list (adds Rule::in validation).
    • Database Suggestions: Use the same column for both label and value to ensure the displayed text is what is submitted.
    // Basic tokens with static suggestions
Combobox::make('topics')
    ->tokens()
    ->options(['Planning', 'Research', 'Review', 'Launch'])
    ->default(['Research']);

// Database-backed tokens
Combobox::make('topics')
    ->tokens()
    ->options(Topic::query()->orderBy('name'), label: 'name', value: 'name');

  12. Override built-in field presenters

    To change the visual style of a built-in field without creating a new PHP class, clone the existing presenter component and register it using the built-in component's key.
    import { registerFieldComponent } from '@inertiaui/form-vue'
import AppTextInput from './components/form/AppTextInput.vue'

// Overrides the default TextInput presenter globally
registerFieldComponent('TextInput', AppTextInput)