Shipments

A complete records screen built only from Keyline components: a freight dispatcher's list of shipments, with filters, selection, bulk actions that can be undone, an inspector and a command menu. Install it to see how the parts compose, then make it yours.

"use client"

import { Shipments } from "@/components/keyline/blocks/shipments/shipments"

// The installed block is one component: an AppShell with its own sidebar, header, table, inspector and command
// menu. Render it as a page; here it fills the preview frame, and its narrow layout follows the frame's width.
export function ShipmentsBlock() {
  return (
    <div className="w-full min-w-0" data-testid="shipments">
      <Shipments />
    </div>
  )
}

Installation

npx shadcn@latest add @keyline-ui/shipments-demo

Run it where your components.json is. The first time, map the @keyline-ui registry: one command, in Installation.

It installs shipments.tsx and shipments-data.ts to components/keyline/blocks/shipments/, the block's own CSS, and every component it uses.

Usage

The block is one component, the size of a page. It starts with "use client";, so a Next.js server page can render it.

// app/shipments/page.tsx (Next.js App Router), or any route in Vite
import { Shipments } from "@/components/keyline/blocks/shipments/shipments"

export default function ShipmentsPage() {
  return <Shipments />
}

The table's height follows the viewport, so give the block the page rather than a box inside one. It binds ⌘K (Ctrl+K) to its command menu on the window.

What it shows

• An App shell with a sidebar that collapses to a rail, a breadcrumb header, and the inspector as its aside: inline when the shell is wide, a sheet when it is narrow.
• Views with counts, search, a carrier Multiselect, an ETA Date range, and status filters in a cell Toolbar that move into More when the row runs out of room.
• A Table sorted by several columns, with hideable columns, rows that expand into a timeline of legs, loading, empty and error rows, and a pager that sets the page size.
• Selection by id that survives filtering and paging, with a bulk bar that says how many selected shipments are filtered out (see Selection).
• Bulk actions with Undo in a docked Toast: assign a carrier, move ETAs, and cancel behind an Alert dialog. Assigning six or more to Rhenus Road fails on purpose, to show the failed state.
• An Inspector form with validation, and a Command menu that runs the same actions by keyboard.

Components

The block installs these, from the built registry item:

• Button
• Menu
• Toolbar
• Field and form
• Multiselect
• Date range
• Table
• Status and badge
• Nav
• App shell
• Breadcrumb
• Notice
• Dialog
• Inspector
• Command menu
• Toast
• selection

Your own data

The records are fictional and generated in shipments-data.ts, deterministically, so every render is the same. The actions wait a moment to stand in for a server. Replace makeShipments and those waits with your own data and calls; the block is your code once it is installed.

// components/keyline/blocks/shipments/shipments-data.ts: the fictional records the block starts from
export type Shipment = {
  id: string
  dest: string
  carrier: string
  status: "booked" | "transit" | "delayed" | "docs" | "delivered" | "none"
  kg: number | null
  eur: number
  eta: Date
  pallets: number
  reference: string
}

export function makeShipments(n = 64): Shipment[] { … }

Props

The item is named shipments-demo because it is a demonstration: its labels, data and rules belong to one fictional company. Re-adding it with --overwrite replaces your edits.