Ballmac UI home
Get Pro

Ecommerce KitPRO

New

The loading, empty and error frame every Ballmac Pro shop block uses: the real heading with a skeleton shaped like a product grid, a cart, an order or a comparison table.

v1.0.0Updated Oct 12, 2026Update without losing your edits

All products

Things we use every day, made to last.

Loading products

Installation

  1. Once per project: add the Pro registry and your licence key.

    components.json
    {
  "registries": {
    "@ballmac": "https://ui.ballmac.com/r/{name}.json",
    "@ballmac-pro": {
      "url": "https://ui.ballmac.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${BALLMAC_LICENSE_KEY}" }
    }
  }
}
    .env.local
    BALLMAC_LICENSE_KEY=your-licence-key

  2. Add it.

    $ pnpm dlx shadcn@latest add @ballmac-pro/ecommerce-kit

  3. Need a licence or help with setup?

    The source is part of Ballmac UI Pro.

    Log in with your licence key to read and copy it here, or install it through the shadcn CLI or the MCP server. You own the code once it is in your project.

    Get ProLog in

Usage

import { EcomSkeleton, EcomStateFrame } from "@/components/ballmac/ecommerce-kit"

The full example is in the Code tab above.

API reference

PropTypeDefault
state*

What the block is doing instead of showing its products.

"loading" | "empty" | "error"—
title

The heading and the line under it, as the ready block shows them. Leave out when the heading depends on the data.

React.ReactNode—
descriptionReact.ReactNode—
width

Widest the content may be.

keyof typeof WIDTH"6xl"
skeleton

The shape of the skeleton: pick the one closest to the ready block.

EcomSkeletonKind"grid"
label

Announced to assistive technology while loading.

string—
empty

Copy for the empty and error panels.

EmptyConfig—
errorErrorConfig—
onRetry

Called by the retry button in the error state. Without it the button is not drawn.

() => void—

Also accepts the standard attributes of its root element.

Use with AI

EcomStateFrame shows a heading and a skeleton, an empty panel or a retry panel for shop pages. EcomSkeleton is the skeleton on its own, in eight shapes. With the shadcn MCP server set up (guide), ask your agent:

Add the Ballmac UI Ecommerce Kit (@ballmac-pro/ecommerce-kit) to this project with the shadcn MCP, then use it where it fits.

Use it for

  • Showing a loading, empty or failed state for your own shop pages
  • Matching the states of the Ballmac Pro ecommerce blocks

Not for

  • Dashboards (use dashboard-kit)
  • A single list or card (use state-view and skeleton directly)

Registry JSON (needs your licence key): https://ui.ballmac.com/r/pro/ecommerce-kit.json

Credits

Covered by the Ballmac UI Pro license.

npm
None
Registry
@ballmac/skeleton@ballmac/state-viewshadcn/utils

Pairs well with

State View

Shows the right thing for what the data is doing: a skeleton while loading, a helpful empty state, an error with retry, or your content. Announced to screen readers, never steals focus, fades with the theme's motion.

Skeleton

A theme-aware loading placeholder with an animation that stops when reduced motion is requested.

Use Resource

A small fetch state machine that gives every block the state to show: loading, ready, empty or error, with retry, abort and stale-answer protection. Includes an adapter for TanStack Query and SWR.

Activity Feed

A compact actor and action feed with timestamps and an empty state.