blatui

Components

Bento Grid

A modern bento grid for arranging cards of varying column and row spans.

php artisan blatui:add bento-grid

Unified dashboard

See orders, revenue, and customers in one place — no tab juggling.

Realtime activity

Live events stream in as they happen.

  • New order #4821
  • Refund approved
  • User signed up

Fast

Sub-second loads, edge-cached everywhere.

Secure

SSO, audit logs, and granular roles built in.

<x-ui.bento-grid :columns="3">
    <x-ui.bento-item
        :colSpan="2"
        title="Unified dashboard"
        description="See orders, revenue, and customers in one place — no tab juggling."
        icon="layout-dashboard"
    />

    <x-ui.bento-item
        :rowSpan="2"
        title="Realtime activity"
        description="Live events stream in as they happen."
        icon="activity"
    >
        <ul class="mt-1 space-y-2 text-sm">
            <li class="text-muted-foreground">New order #4821</li>
            <li class="text-muted-foreground">Refund approved</li>
            <li class="text-muted-foreground">User signed up</li>
        </ul>
    </x-ui.bento-item>

    <x-ui.bento-item
        title="Fast"
        description="Sub-second loads, edge-cached everywhere."
        icon="zap"
    />

    <x-ui.bento-item
        title="Secure"
        description="SSO, audit logs, and granular roles built in."
        icon="shield-check"
    />
</x-ui.bento-grid>

Features

Analytics

Track every metric that matters with live, drill-down reports.

Automation

Trigger workflows on any event — no code required.

Integrations

Connect Stripe, Slack, and 100+ tools out of the box.

Collaboration

Comments, mentions, and shared spaces for your whole team.

Notifications

Stay in the loop with email, push, and in-app alerts.

Security

Encryption at rest and in transit, plus full audit trails.

<x-ui.bento-grid :columns="3">
    <x-ui.bento-item
        title="Analytics"
        description="Track every metric that matters with live, drill-down reports."
        icon="bar-chart-3"
    />

    <x-ui.bento-item
        title="Automation"
        description="Trigger workflows on any event — no code required."
        icon="workflow"
    />

    <x-ui.bento-item
        title="Integrations"
        description="Connect Stripe, Slack, and 100+ tools out of the box."
        icon="plug"
    />

    <x-ui.bento-item
        title="Collaboration"
        description="Comments, mentions, and shared spaces for your whole team."
        icon="users"
    />

    <x-ui.bento-item
        title="Notifications"
        description="Stay in the loop with email, push, and in-app alerts."
        icon="bell"
    />

    <x-ui.bento-item
        title="Security"
        description="Encryption at rest and in transit, plus full audit trails."
        icon="lock"
    />
</x-ui.bento-grid>