# Store orders

> Order KPIs, status and channel filters, bulk fulfil, packing slips and CSV export.

Block · Pro · https://lodeui.com/blocks/store-orders

## When to use

- Commerce admin order lists.

## When not to use

- Customer-facing order history.

## Installation

```bash
npx shadcn@latest add @lode/store-orders
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { StoreOrders } from "@/components/blocks/store-orders";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <StoreOrders />
    </main>
  );
}
```

Built from: Badge, Data table, KPI card, Sparkline, Toast

## API reference

### StoreOrders

Store orders with KPI cards, status and channel filters, bulk fulfil, packing slips and export. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Move between rows |
| Space | Select a row |
| Tab | Reach filters and bulk actions |

## Accessibility

- Inherits the data table's labelled controls.

## Motion

- The bulk bar slides up when orders are selected.

## Responsive behavior

- KPIs are two columns on phones; rows become cards.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Fulfil should call your fulfilment API, then update rows.

## Related

- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.
- [Product detail](https://lodeui.com/blocks/product-detail) — Gallery that follows the color, variants with stock, quantity and add to cart.