---
title: "Products page"
description: "Loam Studio's products: status tabs with counts, a Pro data table with stock across variants, a bulk bar, export, and the editor in a sheet."
plan: Pro
docs: https://ui.edbn.me/docs/templates/products-page
---

# Products page

Loam Studio's products: status tabs with counts, a Pro data table with stock across variants, a bulk bar, export, and the editor in a sheet.

The same admin frame as the overview, with Products active. The page opens with the count and how many are low on stock, Export and Add product. Tabs split the 32 sample products into All, Active, Draft and Archived with live counts, and the Pro data table searches by name or SKU, sorts and pages ten at a time. Each row shows the cover photo (or a tile with the initial), the status, stock as “184 in stock across 2 variants” with a Low stock or Out of stock token, the category and the price with VAT. Selecting rows swaps the search for a bulk bar: set the status, export just those through the export dialog, or archive them after an AlertDialog. A name, a click on its row, or Add product opens the product-editor block adapted in a sheet, its header and Save staying at the top. Saving writes the product back to its row (or adds it), SKUs are checked against every other product, and closing with unsaved changes asks first.

A Pro page template built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/products-page
```

## Dependencies
- npm: lucide-react@^1.33.0, @tanstack/react-table@^9.2.4, zod@^4.3.5, react-hook-form@^7.87.0
- edbn: edbn-base, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, checkbox, collapsible, dialog, dropdown-menu, dropzone, field, input-group, kbd, popover, select, separator, sheet, sidebar, spinner, tabs, text-link, tooltip, data-table, form-core, form-date-field, form-fields

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More lists & records templates

All 5, with install commands: https://ui.edbn.me/docs/templates/lists-and-records (Markdown: https://ui.edbn.me/docs/templates/lists-and-records.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt