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" />.
- 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
composer require accelade/gridsThe service provider will be automatically registered.
php artisan vendor:publish --tag=grids-configuse 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))
);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'),
]);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');// Fixed columns
$grid->columns(4);
// Responsive columns
$grid->columns([
'default' => 1,
'sm' => 2,
'md' => 3,
'lg' => 4,
'xl' => 5,
]);$grid = Grid::make('gallery')
->query(Photo::query())
->masonry()
->columns(4);$grid = Grid::make('articles')
->query(Article::query())
->list(); // Single column list$grid = Grid::make('products')
->heading('Product Gallery')
->description('Browse our collection')
->headerActions([
CreateAction::make(),
ExportAction::make(),
]);$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'),
]);<x-grids::grid :grid="$grid" />- 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
| Guide | Description |
|---|---|
| Overview | Introduction and basic concepts |
| Cards | Card component configuration |
| Layouts | Grid layout options |
| Filters | Filtering and search |
Accelade Grids is part of the Accelade ecosystem:
| Package | Description |
|---|---|
| accelade/accelade | Core reactive Blade components |
| accelade/schemas | Schema-based layouts |
| accelade/forms | Form builder with validation |
| accelade/infolists | Display read-only data |
| accelade/tables | Data tables with filtering |
| accelade/actions | Action buttons with modals |
| accelade/widgets | Dashboard widgets |
| accelade/grids | Card-based grids (this package) |
| accelade/query-builder | Query builder utilities |
| accelade/filters | Filter components |
MIT License. See LICENSE for details.