---
title: "Customers page"
description: "Loam Studio's customers: segments with counts, a Pro data table with search, sorting, selection and a bulk bar, and each profile in a sheet."
plan: Pro
docs: https://ui.edbn.me/docs/templates/customers-page
---

# Customers page

Loam Studio's customers: segments with counts, a Pro data table with search, sorting, selection and a bulk bar, and each profile in a sheet.

The same admin frame as the overview, with Customers active: a sidebar that folds to icons (⌘B) or moves into a sheet under 1024px, and a header with the breadcrumb and search (⌘K). The page opens with the customer count, Export (a CSV of everyone) and Add customer. Tabs split the 48 sample customers into All, Returning, New and At risk with live counts. The Pro data table searches by name, email or town, sorts by any column, pages ten at a time, and keeps its height on a short page. Selecting rows swaps the search for a bulk bar: add a tag, export just those, or delete them after an AlertDialog. A customer's name, or a click anywhere on their row, opens their profile in a sheet: the customer-profile block adapted with figures, last orders, tags that save back to the table, a self-saving note and delete. Closing it returns focus to the name.

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/customers-page
```

## Dependencies
- npm: lucide-react@^1.33.0, @tanstack/react-table@^9.2.4
- edbn: edbn-base, alert-dialog, avatar, badge, breadcrumb, button, checkbox, combobox, dropdown-menu, field, input-group, kbd, separator, sheet, sidebar, spinner, tabs, text-link, textarea, tooltip, data-table

## Source

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

## More app screens templates

All 5, with install commands: https://ui.edbn.me/docs/templates/app-screens (Markdown: https://ui.edbn.me/docs/templates/app-screens.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