README

Card-based Grid Layouts for Laravel. Zero Complexity.

Build beautiful, responsive card grids with minimal code. Accelade Grids provides powerful components for displaying data in cards, masonry layouts, and responsive grids.

use Accelade\Grids\Grid;
use Accelade\Grids\Cards\Card;
use App\Models\Product;

$grid = Grid::make('products')
    ->query(Product::query())
    ->columns(3)
    ->card(
        Card::make()
            ->title(fn ($record) => $record->name)
            ->description(fn ($record) => $record->description)
            ->image(fn ($record) => $record->image_url)
            ->url(fn ($record) => route('products.show', $record))
    )
    ->fromRequest()
    ->paginate();

That's it. Render with <x-grids::grid :grid="$grid" />.

Why Accelade Grids?

• Filament-Compatible API - Familiar syntax if you use Filament
• Responsive Layouts - Automatic column adjustments for different screen sizes
• Masonry Support - Pinterest-style staggered layouts
• Cards - Flexible card templates with images, titles, descriptions, badges
• Card Sections - Display key-value pairs within cards
• Actions - Support for row actions on each card
• Pagination - Built-in pagination support
• Filters - Apply filters to narrow results (via Query Builder)
• Search - Full-text search support
• Sorting - Sortable columns
• Dark Mode - Built-in dark mode support

Quick Start

composer require accelade/grids

The service provider will be automatically registered.

Publish Configuration

php artisan vendor:publish --tag=grids-config

Features at a Glance

Basic Grid

use Accelade\Grids\Grid;
use Accelade\Grids\Cards\Card;
use App\Models\Product;

$grid = Grid::make('products')
    ->query(Product::query())
    ->columns(4)
    ->gap('6')
    ->card(
        Card::make()
            ->title(fn ($record) => $record->name)
            ->description(fn ($record) => Str::limit($record->description, 100))
            ->image(fn ($record) => $record->image_url)
            ->url(fn ($record) => route('products.show', $record))
    );

Card with Sections

use Accelade\Grids\Cards\Card;
use Accelade\Grids\Cards\CardSection;

Card::make()
    ->title(fn ($record) => $record->name)
    ->description(fn ($record) => $record->excerpt)
    ->sections([
        CardSection::make()
            ->label('Price')
            ->value(fn ($record) => '$' . number_format($record->price, 2))
            ->icon('heroicon-o-currency-dollar')
            ->color('success'),

        CardSection::make()
            ->label('Stock')
            ->value(fn ($record) => $record->stock . ' available')
            ->icon('heroicon-o-cube'),
    ]);

Card with Badge and Actions

use Accelade\Grids\Cards\Card;
use Accelade\Actions\ViewAction;
use Accelade\Actions\EditAction;
use Accelade\Actions\DeleteAction;

Card::make()
    ->title(fn ($record) => $record->name)
    ->badge(fn ($record) => $record->is_featured ? 'Featured' : null, 'primary')
    ->actions([
        ViewAction::make(),
        EditAction::make(),
        DeleteAction::make(),
    ], position: 'footer');

Responsive Columns

// Fixed columns
$grid->columns(4);

// Responsive columns
$grid->columns([
    'default' => 1,
    'sm' => 2,
    'md' => 3,
    'lg' => 4,
    'xl' => 5,
]);

Masonry Layout

$grid = Grid::make('gallery')
    ->query(Photo::query())
    ->masonry()
    ->columns(4);

List Layout

$grid = Grid::make('articles')
    ->query(Article::query())
    ->list(); // Single column list

With Header

$grid = Grid::make('products')
    ->heading('Product Gallery')
    ->description('Browse our collection')
    ->headerActions([
        CreateAction::make(),
        ExportAction::make(),
    ]);

Empty State

$grid = Grid::make('products')
    ->emptyStateHeading('No products found')
    ->emptyStateDescription('Try adjusting your search or filters')
    ->emptyStateIcon('heroicon-o-cube')
    ->emptyStateActions([
        CreateAction::make()->label('Create Product'),
    ]);

Blade Component

<x-grids::grid :grid="$grid" />

Requirements

• PHP 8.2+
• Laravel 11.x or 12.x
• accelade/accelade ^1.0
• accelade/query-builder ^1.0
• accelade/filters ^1.0
• accelade/actions ^1.0

Documentation

Accelade Ecosystem

Accelade Grids is part of the Accelade ecosystem:

License

MIT License. See LICENSE for details.