Logistics dashboard UI kit for Figma and React FleetFlow AI.

The complete front end for an AI logistics platform, from dispatch and live tracking to fleet and customers. A design file and production React code, in English and Arabic.

Get FleetFlow, from $199Open the live demo
  • 249Screens in Figma, desktop to mobile and Arabic
  • 86Screens, modals and states in code
  • 197Components with variants
  • 6AI agents, each with guardrails

Who it is for

  • Logistics software founders

    Launch a TMS, logistics CRM or fleet management product that already looks like the leader in its category, and spend your engineering time on the parts only you can build.

  • Freight brokers and 3PLs

    Replace the internal screens your dispatchers fight with every day. Clear queues, live maps and exceptions sorted by what they cost you.

  • Agencies

    Start client logistics projects from a finished, consistent system instead of a blank file, and deliver weeks earlier.

Inside the product

  1. 01 · Operations overview

    The whole network at a glance.

    Key numbers, the shipment that needs attention right now, an AI operations brief with proposed actions, the live map and the dispatch timeline, all on one screen.

    FleetFlow operations overview with KPIs, an at risk shipment, an AI operations brief and the dispatch timeline
  2. 02 · Dispatch

    AI proposes. Your team approves.

    A dispatch queue, a map with proposed reroutes and a driver timeline. Agents suggest assignments and reroutes with the time they save, and nothing changes until a person approves it.

    FleetFlow dispatch screen with the load queue, a reroute proposal on the map and agent recommendations
  3. 03 · Live tracking

    Every truck, every delivery window.

    Vehicle list, live map and a detail panel with speed, reefer temperature, fuel and hours left, plus the route agent’s recommendation when a window is at risk.

    FleetFlow live tracking with the vehicle list, map and a sleeper tractor detail panel
  4. 04 · AI agents

    Six agents, with guardrails.

    Dispatch, Route, Exception, Customer, Fleet and Operations Analyst agents, each with its own autonomy level, activity log, permissions and a pause switch.

  5. 05 · Exceptions

    Problems sorted by business impact.

    Every exception with severity, impact, the agent’s recommendation, owner and status, ranked by what it costs you rather than by when it happened.

Open every screen in the live demo

English and Arabic

Arabic,done properly.

Not a translated copy. Every screen is laid out right to left, with mirrored icons and timelines, Arabic type and real Arabic copy, in Figma and in code. One switch changes the whole product.

Try it in Arabic

What you get

The design file

  • 83 desktop screens: core pages, create and action flows, sign in and every empty, loading and error state
  • 69 tablet and 33 mobile screens, with the responsive rules
  • 64 desktop screens in Arabic, laid out right to left
  • 197 components: 27 variant sets with 127 variants, plus 70 standalone
  • 52 variables and 19 text styles, plus 18 Arabic text styles

The code

  • React 19 and TypeScript, strictly typed
  • Tailwind CSS v4 themed with the same tokens as the Figma variables
  • Accessible primitives, usable with a keyboard and a screen reader
  • English and Arabic with 3,500+ translated strings, switchable at runtime
  • Every designed state: loading, empty, error, offline and no access
  • Responsive layouts and a sidebar that opens and closes
  • Mock data in one folder, ready to swap for your API
  • A static build that deploys to any host
FleetFlow shipments table with the sidebar open, showing labels, groups and counts
FleetFlow AI overview on an iPhone 17 Pro

Pricing

Pay once.Updates included.

Design file

  • Figma Personal

    $199

    For one designer

    • The full Figma file, English and Arabic
    • Unlimited projects for you or your own company
    • Free updates
    Buy Figma Personal

  • Figma Team

    $599

    For up to 10 people in one company or agency

    • Everything in Figma Personal
    • Use it in your clients’ projects too
    • Free updates
    Buy Figma Team

  • Upgrade

    Already own the Figma kit?

    Move up to any code pack and pay only the difference. Send your Gumroad receipt and we will send you a private upgrade link.

    hello@beconfidency.agency

Design file and code

  • Code Pro

    $899

    For one developer and one product

    • The Figma file and the full source code
    • One product, internal or commercial
    • Free updates
    • 30 days of email support
    Buy Code Pro

  • Recommended for product teams

    Code Team

    $1,799

    For up to 10 designers and developers

    • Everything in Code Pro, for the whole team
    • Unlimited products for your own company
    • Free updates
    • 90 days of email support
    Buy Code Team

  • Code Extended

    $3,499

    For agencies and larger teams

    • Unlimited designers and developers
    • Use it in client projects
    • A one hour onboarding call
    • 12 months of priority support
    Buy Code Extended

Prices in US dollars. Secure checkout and instant delivery by Gumroad. No pack may be resold or shared as a template.

Rather we build it for you?

  • Launch Sprint · from $6,000

    FleetFlow with your brand, shipped.

    • Your brand applied across every screen
    • Up to 10 screens adapted to your workflow
    • Connected to your API and deployed to your hosting

  • Custom build · from $15,000

    A full product, designed and built.

    • Discovery and mapping of your operation
    • New modules designed in the FleetFlow system
    • Production front end, handed over with documentation
or write to hello@beconfidency.agency

Asked often

What is the difference between the Figma and code packs?

Figma packs include the design file. Code packs include the same design file plus the complete source code that runs the live demo.

Is there a backend?

No. FleetFlow is the front end, with realistic mock data kept in one folder so you can connect your own API. If you want us to connect it for you, that is what the Launch Sprint is for.

Can I use it for client work?

Figma Team covers client projects; Figma Personal covers your own projects and your own company. To use the code in client projects, choose Code Extended.

Can I check the code quality before I buy?

Yes. The live demo is the code. Open it, resize the window, switch it to Arabic and move through it with only a keyboard.

Do I get updates?

Yes. Every update to the pack you bought is free, and the newest files are always in your Gumroad library.

I already own the Figma kit. Can I upgrade?

Yes, and you only pay the difference. Write to hello@beconfidency.agency with your Gumroad receipt.

How do I get the files?

Right after checkout Gumroad emails you a download link, and the files stay in your Gumroad library.

Do you offer refunds?

The files are delivered instantly, so sales are final. If a file is broken or missing, we will fix it or refund you.

Changelog

  1. October 2026Tablet, mobile and states69 tablet and 33 mobile screens, sign in screens and every loading, empty and error state. 249 screens in total.
  2. October 2026Code packsSource code for every screen, a sidebar that opens and closes, and a language switch.
  3. October 2026ArabicA full right to left version of every screen.
  4. October 2026First releaseThe FleetFlow AI Figma kit.

Next project

Have an ideaworth raising?

or write to hello@beconfidency.agency