RestroPress Admin UI Kit

Color Tokens

All colors are defined as CSS custom properties on :root. Use the token name, never the raw hex.

Brand / Primary

--rp-color-primary

#f25a24

--rp-color-primary-hover

#d94b1d

--rp-color-primary-soft

#fff4e8

--rp-color-primary-border

#f3b384

Neutrals / Text / Surface

--rp-color-text

#1d2327

--rp-color-heading

#111827

--rp-color-muted

#646970

--rp-color-subtle

#8c8f94

--rp-color-border

#dcdcde

--rp-color-border-strong

#c3c4c7

--rp-color-bg

#ffffff

--rp-color-bg-subtle

#f6f7f7

--rp-color-bg-muted

#f0f0f1

Semantic — Info

--rp-color-info

#2271b1

--rp-color-info-hover

#135e96

--rp-color-info-soft

#f0f6fc

--rp-color-info-border

#c5d9ed

Semantic — Success

--rp-color-success

#1f7a4d

--rp-color-success-soft

#ecf7ee

--rp-color-success-border

#c9efd9

Semantic — Warning

--rp-color-warning

#b8772b

--rp-color-warning-soft

#fff4e0

--rp-color-warning-border

#f0bf73

Semantic — Danger

--rp-color-danger

#b42318

--rp-color-danger-hover

#8f1d13

--rp-color-danger-soft

#fceaea

--rp-color-danger-border

#efb7bf

Semantic — Purple

--rp-color-purple

#6b3fa0

--rp-color-purple-soft

#f1ebfa

Typography Tokens

System font stack with a 6-step size scale. All sizes are in pixels to match WordPress admin conventions.

Title — 23px --rp-font-size-title

XL — 18px --rp-font-size-xl

LG — 15px --rp-font-size-lg

MD — 13px (body default) --rp-font-size-md

SM — 12px (labels, captions) --rp-font-size-sm

XS — 11px (eyebrows, table headers) --rp-font-size-xs

Line height tight — 1.2 --rp-line-height-tight

Line height base — 1.4 --rp-line-height-base

Line height readable — 1.6 --rp-line-height-readable

Spacing & Border Radius

An 8-step spacing scale built on a 4px base. Five radius steps from sharp to pill.

Spacing Scale

Token	Value	Visual
--rp-space-2xs	2px
--rp-space-xs	4px
--rp-space-sm	8px
--rp-space-md	12px
--rp-space-lg	16px
--rp-space-xl	24px
--rp-space-2xl	32px

Border Radius

Token	Value	Visual
--rp-radius-xs	4px
--rp-radius-sm	6px
--rp-radius-md	8px
--rp-radius-lg	12px
--rp-radius-xl	16px
--rp-radius-pill	999px

Shadows, Transitions & Z-index

Four shadow levels for elevation. Named z-index layers prevent stacking conflicts.

Shadows

shadow-xs

shadow-sm

shadow-md

shadow-modal

Z-index Layers

Token	Value	Used for
--rp-z-sticky	10	Sticky table headers, toolbars
--rp-z-dropdown	1000	Dropdowns, popovers
--rp-z-modal	100000	Modals, overlays

Focus Rings & Transition

Token	Value
--rp-transition	0.15s ease
--rp-focus-ring	0 0 0 2px rgba(34,113,177,0.2)
--rp-focus-ring-primary	0 0 0 2px rgba(242,90,36,0.22)

Buttons

All buttons use .rp-btn as the base class plus a variant modifier. Combine with WP's .button class when inside WP forms.

Variants

Sizes

With Icons

Disabled State

Icon Actions (inline table actions)

Badges & Status

.rp-status-badge includes a dot indicator. .rp-badge is the same shape without the dot — for counts and labels.

Status Badges (with dot)

Processing Completed Pending Cancelled

Plain Badges (no dot)

Info Active Expiring Failed

Discount Status Badges

Active Inactive Expired

Reports Status Pills

Completed Pending Processing

Cards

Cards are the primary surface for grouping content. Use .rp-card as the base. Metric cards extend with icon + stats layout.

Base Card

Card Title

Supporting description text goes here.

Card body content lives here. Any layout is valid inside a card.

Metric Cards

Simple metric card structure: icon, label, and value only. Screen-specific KPI cards add subtitles, deltas, and footers later.

Total Orders

1,248

Revenue

$24,800

Avg. Time

18 min

Customers

342

Danger Zone Card

Danger Zone

This action is permanent and cannot be undone. All customer data will be removed.

Form Controls

All native inputs, selects, and textareas are normalized inside .rp-admin-scope. Explicit classes .rp-input and .rp-select work outside the scope.

Text Inputs

Customer Name

Email Address

Used for order receipts and notifications.

Search

Help Text

Minimum Order Amount

Orders below this amount will not be accepted. Set to 0 to disable.

Select

Order Status

Textarea

Order Notes

Notes are visible to the customer in the receipt email.

Checkbox & Radio

Enable live order notifications Send SMS alerts Pickup Delivery

Field Width Helpers

Form Actions Row

Delete record

Toggle Switch

.rp-toggle is the compact on/off control used for extension license activation states. It uses a native checkbox plus a .slider span.

Disabled Enabled

Filters & Search

Composable filter bar patterns used across Orders, Customers, and Discounts screens.

Filter Chips (status quick-filter)

All Orders 1,248 Completed 890 Processing 142 Pending 38 Cancelled 178

Filter Bar

Filter Topbar (dropdown + search)

Advanced Filters Panel

Service Type

Payment Status

Order Status

Active Filter Chips (applied filters)

Filters: Status: Completed Gateway: Stripe Clear all

Date Chips

Today This Week Last 7 Days This Month Last Month Custom Range…

Tabs

Used on Settings, Reports, and customer detail pages. Supports both .rp-tab and WP's native .nav-tab class.

Standard Tabs

Tab panel content renders here.

Tabs with Icons

Attached Tabs

Tab panel content — card connects directly to the active tab above.

Tables

RestroPress uses WordPress's native .wp-list-table inside .rp-admin-scope for automatic styling. The .rp-table class is available for custom tables.

List Table with Toolbar

Order	Customer	Date	Total	Status
#1042	Arun Sharma	May 30, 2026	$38.50	Completed
#1041	Priya Menon	May 30, 2026	$22.00	Processing
#1040	Daniel Okonkwo	May 29, 2026	$61.00	Pending

Empty Table State

No orders found

No orders match your current filters. Try adjusting the date range or status.

Table Scroll Wrapper

Wide report tables must sit inside .rp-table-scroll so narrow WordPress admin viewports scroll horizontally instead of breaking the layout.

Date	Orders	Gross Sales	Refunds	Net Revenue	Average Order	Conversion
May 30, 2026	82	$2,460.00	$0.00	$2,460.00	$30.00	14.2%
May 29, 2026	74	$2,018.00	$42.00	$1,976.00	$26.70	12.8%

Notices

.rp-notice is the in-context inline notice. The system currently has one built-in variant (info). Semantic variants below use token overrides directly.

Your order export is ready. Download it here before it expires in 24 hours.

Settings saved successfully.

Your SSL certificate expires in 7 days. Renew it to keep payments secure.

Payment gateway connection failed. Check your API credentials.

Empty States

Used when a page or table has no content. Standard variant and compact variant.

Standard Empty State

No discount codes yet

Create your first discount code to start offering deals to your customers at checkout.

Compact Empty State

No customers found

Try a different search term or clear your filters.

Modals

The kit styles WP Backbone modals via .rp-modal .rp-backbone-modal-content. The token --rp-shadow-modal and --rp-radius-xl define the surface.

Order #1042 Details

Review the full order before updating the status.

Customer

Arun Sharma

Total

$38.50

Processing

Date Range Popover

The date range popover is rendered and positioned by admin-ui.js. This shows the static markup and styles.

Page Header

.rp-page-header is the top chrome for every admin screen — title, subtitle, and action buttons.

With eyebrow label (Reports style)

Grid System

CSS Grid-based layout helpers. All collapse to single column at 782px. Named grids for specific screen patterns.

rp-grid rp-grid-2

Col 1

Col 2

rp-grid rp-grid-3

Col 1

Col 2

Col 3

rp-grid rp-grid-4

Col 1

Col 2

Col 3

Col 4

rp-grid rp-grid-auto (auto-fit, min 190px)

Auto

rp-grid rp-grid-main-sidebar (1.5fr + 0.75fr, min 320px sidebar)

Main content

Sidebar

rp-grid rp-grid-command-strip (auto-fit, min 150px — KPI row)

KPI 1

KPI 2

KPI 3

KPI 4

KPI 5

Utility Classes

Single-purpose helpers for inline layout adjustments. Prefer these over inline styles.

Class	CSS rule
.rp-u-flex	display: flex
.rp-u-inline-flex	display: inline-flex
.rp-u-items-center	align-items: center
.rp-u-justify-between	justify-content: space-between
.rp-u-wrap	flex-wrap: wrap
.rp-u-gap-xs	gap: 4px
.rp-u-gap-sm	gap: 8px
.rp-u-gap-md	gap: 12px
.rp-u-gap-lg	gap: 16px
.rp-u-mt-0	margin-top: 0
.rp-u-mb-0	margin-bottom: 0
.rp-u-muted	color: var(--rp-color-muted)
.rp-u-text-right	text-align: right
.rp-u-nowrap	white-space: nowrap
.rp-u-min-0	min-width: 0
.rp-muted-text	color: var(--rp-color-muted)
.rp-field-sm	width: 100%; max-width: 96px
.rp-field-md	width: 100%; max-width: 360px
.rp-field-lg	width: 100%; max-width: 520px
.rp-field-wp	width: min(420px, 100%)
.rp-field-full	width: 100%; max-width: 100%

Internal / JS State Classes

These classes are implementation states or root wrappers. They are listed for reference and do not need standalone visual demos.

Class	Purpose
.rp-admin-scope	Root scope wrapper applied once per RestroPress admin page.
.rp-admin-ui-ready	Added to `html` by `admin-ui.js` after initialization.
.rp-table-empty	Applied when table empty-state styling is active.
.rp-reports-custom-date	JS-controlled custom range trigger.
.rp-reports-custom-apply	JS-controlled custom range apply action.
.rp-filters-search-submit	Hidden submit fallback shown only by specific JS contexts.
.is-open	State class for open advanced filters toggle.

Class Reference

Static index of UI-kit classes from the six CSS files plus rp- classes currently used by the validated RestroPress admin PHP screens. Use the visual component sections above for reusable patterns; use this index to avoid inventing duplicate class names.

.is-active .is-amber .is-blue .is-cancelled .is-completed .is-danger .is-disabled .is-down .is-failed .is-flat .is-green .is-info .is-late .is-open .is-red .is-refunded .is-success .is-up .is-warning .level-1 .level-2 .level-3 .level-4 .rp-add-update-elements .rp-addin-item-inner-wrap .rp-addon-info .rp-addon-main-wrap .rp-admin-scope .rp-admin-ui-ready .rp-backbone-modal .rp-backbone-modal-content .rp-badge .rp-bottleneck-list .rp-btn .rp-btn-danger .rp-btn-icon .rp-btn-large .rp-btn-outline .rp-btn-primary .rp-btn-secondary .rp-btn-small .rp-btn-success .rp-cancel-section .rp-card .rp-card-header .rp-card-subtitle .rp-checkbox-inline .rp-command-center .rp-command-grid .rp-command-grid-secondary .rp-command-grid-thirds .rp-command-kicker .rp-command-panel .rp-command-service-badge .rp-command-side .rp-command-title .rp-command-topline .rp-command-updated .rp-customer-actions .rp-customer-agreement-list .rp-customer-agreements .rp-customer-avatar .rp-customer-contact-card .rp-customer-contact-list .rp-customer-content .rp-customer-crm .rp-customer-detail-page .rp-customer-edit-address .rp-customer-extension-stats .rp-customer-hero .rp-customer-hero-main .rp-customer-identity .rp-customer-main-grid .rp-customer-metrics .rp-customer-name .rp-customer-note-form .rp-customer-notes-layout .rp-customer-notes-list .rp-customer-profile-form .rp-customer-section .rp-customer-service-edit .rp-customer-shell .rp-customer-stats .rp-customers-header .rp-customers-list-page .rp-customers-page .rp-danger-zone .rp-date-custom-actions .rp-date-custom-fields .rp-date-custom-panel .rp-date-range-edit .rp-date-range-popover .rp-date-range-popover-actions .rp-date-range-popover-fields .rp-date-range-preset .rp-datechip .rp-delta-down .rp-delta-flat .rp-delta-up .rp-discount-form .rp-discount-form-page .rp-discount-form-table .rp-discount-status .rp-discounts-header .rp-discounts-list-page .rp-discounts-page .rp-edit-panel .rp-edit-panel-customer .rp-edit-panel-customer-select .rp-edit-panel-footer .rp-edit-panel-new-customer .rp-edit-panel-service .rp-edit-section .rp-empty-state .rp-empty-state-actions .rp-empty-state-compact .rp-empty-state-description .rp-empty-state-icon .rp-empty-state-table .rp-empty-state-title .rp-extension-actions .rp-extension-card .rp-extension-card-body .rp-extension-card-footer .rp-extension-card-header .rp-extension-card-inner .rp-extension-card-title-wrap .rp-extension-description .rp-extension-image .rp-extension-license-form .rp-extension-license-status .rp-extension-price .rp-extension-title .rp-extensions-grid .rp-extensions-page .rp-extensions-toolbar .rp-field-full .rp-field-lg .rp-field-md .rp-field-sm .rp-field-wp .rp-filter-active-chip .rp-filter-bar .rp-filter-chip .rp-filter-clear-all .rp-filter-dropdown .rp-filter-dropdown-label .rp-filter-dropdown-select .rp-filter-field .rp-filter-value .rp-filters .rp-filters-active .rp-filters-active-label .rp-filters-advanced .rp-filters-advanced-actions .rp-filters-advanced-grid .rp-filters-controls .rp-filters-more-toggle .rp-filters-search .rp-filters-search-icon .rp-filters-search-submit .rp-filters-shortcuts .rp-filters-topbar .rp-flow-lane .rp-flow-lanes .rp-focusable .rp-form-actions .rp-form-group .rp-grid .rp-grid-2 .rp-grid-24 .rp-grid-3 .rp-grid-4 .rp-grid-5 .rp-grid-6 .rp-grid-auto .rp-grid-command-strip .rp-grid-filter .rp-grid-main-sidebar .rp-grid-profile .rp-grid-sidebar-360 .rp-health- .rp-help-text .rp-icon-action .rp-input .rp-insight-list .rp-issue-badge .rp-kpi-card .rp-license-deactivate-inner .rp-list-table-form .rp-list-table-toolbar .rp-live-column .rp-live-column-body .rp-live-column-count .rp-live-column-empty .rp-live-column-header .rp-live-column-title .rp-live-column-tone- .rp-live-filter-chip .rp-live-filters .rp-live-kanban .rp-live-kpi .rp-live-kpi- .rp-live-kpi-count .rp-live-kpi-label .rp-live-kpis .rp-live-orders .rp-live-orders-audio .rp-live-orders-wrap .rp-live-pageheader .rp-live-pause .rp-live-pause-label .rp-live-refresh .rp-live-search .rp-live-search-input .rp-live-service-filter .rp-live-sound-label .rp-live-sound-overlay .rp-live-sound-overlay-inner .rp-live-sound-toggle .rp-live-status .rp-live-status-dot .rp-live-status-main .rp-live-status-text .rp-live-toolbar .rp-live-toolbar-left .rp-live-toolbar-right .rp-menu-empty .rp-metric-card .rp-metric-icon .rp-metric-label .rp-metric-value .rp-mini-stats .rp-modal .rp-muted-text .rp-notice .rp-now-metric .rp-now-strip .rp-operator-kpis .rp-order-add-item-card .rp-order-billing-empty .rp-order-billing-toggle .rp-order-cancel-edit .rp-order-content-panel .rp-order-copy-key .rp-order-customer-instruction .rp-order-danger-delete .rp-order-danger-zone .rp-order-detail-actions .rp-order-detail-back .rp-order-detail-badge .rp-order-detail-button .rp-order-detail-card .rp-order-detail-cards .rp-order-detail-header-main .rp-order-detail-list .rp-order-detail-print .rp-order-detail-receipt .rp-order-detail-row .rp-order-detail-save .rp-order-detail-secondary-link .rp-order-detail-service .rp-order-detail-summary .rp-order-detail-title .rp-order-detail-title-row .rp-order-details-page .rp-order-edit .rp-order-edit-actions .rp-order-edit-item-thumb .rp-order-edit-item-thumb-placeholder .rp-order-edit-toggle .rp-order-fulfilment-action .rp-order-fulfilment-change .rp-order-header .rp-order-item-actions .rp-order-item-addons .rp-order-item-base-name .rp-order-item-close .rp-order-item-copy .rp-order-item-field .rp-order-item-id .rp-order-item-instruction .rp-order-item-key .rp-order-item-main .rp-order-item-mobile-addons .rp-order-item-modal .rp-order-item-modal-apply .rp-order-item-modal-fooditem .rp-order-item-modal-instruction .rp-order-item-modal-price .rp-order-item-modal-qty .rp-order-item-modal-subtotal .rp-order-item-modal-title .rp-order-item-modal-trigger .rp-order-item-modal-variation .rp-order-item-mode .rp-order-item-money .rp-order-item-muted .rp-order-item-qty .rp-order-item-read-row .rp-order-item-thumb .rp-order-item-thumb-placeholder .rp-order-items-count .rp-order-items-edit .rp-order-items-edit-list .rp-order-items-edit-toolbar .rp-order-items-edit-toolbar-actions .rp-order-items-heading .rp-order-items-helper .rp-order-items-read .rp-order-items-table .rp-order-items-table-head .rp-order-items-title .rp-order-items-total-box .rp-order-items-total-final .rp-order-items-totals .rp-order-items-totals-spacer .rp-order-main-grid .rp-order-next-submit .rp-order-note-body .rp-order-note-composer .rp-order-note-content .rp-order-note-delete .rp-order-note-dot .rp-order-note-entry .rp-order-note-meta .rp-order-notes-empty .rp-order-notes-layout .rp-order-notes-timeline .rp-order-payment-billing .rp-order-payment-card .rp-order-payment-key-value .rp-order-payment-row .rp-order-payment-status-badge .rp-order-payment-subheading .rp-order-placed-time .rp-order-preview .rp-order-read .rp-order-receipt-email-picker .rp-order-section .rp-order-section-header .rp-order-section-heading .rp-order-section-heading-main .rp-order-shell .rp-order-side-panel .rp-order-status-copy .rp-order-status-current-badge .rp-order-status-dot .rp-order-status-panel .rp-order-status-read .rp-order-status-step .rp-order-status-track .rp-order-summary-body .rp-order-summary-card .rp-order-summary-icon .rp-order-summary-label .rp-order-summary-total .rp-order-top-alert .rp-orders-action .rp-orders-action-list .rp-orders-action-live .rp-orders-datechips .rp-orders-daterow .rp-orders-daterow-label .rp-orders-kpi-body .rp-orders-kpi-card .rp-orders-kpi-delta .rp-orders-kpi-footer .rp-orders-kpi-icon .rp-orders-kpi-info .rp-orders-kpi-label .rp-orders-kpi-period .rp-orders-kpi-row .rp-orders-kpi-subtitle .rp-orders-kpi-value .rp-orders-list-wrap .rp-orders-pageheader .rp-orders-pageheader-actions .rp-orders-pageheader-titles .rp-orders-pastnotice .rp-orders-pastnotice-close .rp-orders-pastnotice-text .rp-orders-subtitle .rp-orders-title .rp-page-actions .rp-page-eyebrow .rp-page-header .rp-page-header-main .rp-page-header-titles .rp-page-subtitle .rp-page-title .rp-page-title-icon .rp-panel-actions .rp-panel-header .rp-panel-subheading .rp-payment-chip .rp-priority-panel .rp-priority-table .rp-priority-table-wrap .rp-readiness-card .rp-readiness-grid .rp-recovery-grid .rp-report-compare .rp-report-order-status .rp-report-payment .rp-report-range .rp-report-service .rp-reports-bar-list .rp-reports-bar-row .rp-reports-bar-track .rp-reports-chart .rp-reports-coming-next .rp-reports-custom-apply .rp-reports-custom-date .rp-reports-customer-email .rp-reports-customers-grid .rp-reports-customers-table .rp-reports-dot .rp-reports-export-card .rp-reports-export-card-head .rp-reports-export-form .rp-reports-export-grid .rp-reports-export-intro .rp-reports-export-meta .rp-reports-export-secondary-head .rp-reports-filter .rp-reports-filter-actions .rp-reports-grid-line .rp-reports-header .rp-reports-heatmap .rp-reports-insights .rp-reports-intelligence .rp-reports-intelligence-filter .rp-reports-kpi-grid-five .rp-reports-kpi-grid-seven .rp-reports-kpi-grid-six .rp-reports-legend .rp-reports-line .rp-reports-menu-grid .rp-reports-menu-grid-secondary .rp-reports-menu-hero .rp-reports-menu-table .rp-reports-metric .rp-reports-metric-body .rp-reports-metric-label .rp-reports-mini-list .rp-reports-orders-risk-grid .rp-reports-page .rp-reports-panel .rp-reports-payments-grid .rp-reports-period-card .rp-reports-period-edit .rp-reports-period-heading .rp-reports-recovery-table .rp-reports-risk-panel .rp-reports-risk-table .rp-reports-rush-corner .rp-reports-rush-heatmap .rp-reports-rush-hour .rp-reports-sales-grid .rp-reports-sales-trend .rp-reports-status-day .rp-reports-status-pill .rp-reports-status-stack .rp-reports-status-timeline .rp-reports-table .rp-reports-taxes-table .rp-rush-bar .rp-rush-chart .rp-section .rp-select .rp-service-date-time-row .rp-service-details .rp-service-edit-fields .rp-service-split .rp-service-time .rp-settings-form .rp-settings-header .rp-settings-page .rp-settings-panel .rp-settings-sections .rp-shift-health .rp-status-badge .rp-status-chip .rp-store- .rp-store-actions .rp-store-status .rp-tab .rp-table .rp-table-empty .rp-table-scroll .rp-table-search-action .rp-table-toolbar .rp-table-toolbar-primary .rp-table-toolbar-secondary .rp-tabs .rp-tabs-attached .rp-tabs-flush-bottom .rp-tabs-panel .rp-tabs-shell .rp-toggle .rp-tool-card .rp-tools-header .rp-tools-health-table .rp-tools-page .rp-tools-panels .rp-top-items .rp-u-flex .rp-u-gap-lg .rp-u-gap-md .rp-u-gap-sm .rp-u-gap-xs .rp-u-inline-flex .rp-u-items-center .rp-u-justify-between .rp-u-mb-0 .rp-u-min-0 .rp-u-mt-0 .rp-u-muted .rp-u-nowrap .rp-u-text-right .rp-u-wrap .status-active .status-expired .status-inactive .tone-amber .tone-blue .tone-green .tone-purple .tone-red

Screen: Orders KPI Row

The KPI strip at the top of the Orders screen. Each card has an icon, value, delta indicator, and subtitle.

Total Orders

1,248

All time

Revenue

$24,800

This month

Avg. Prep Time

18 min

Last 30 days

New Customers

342

This month

Screen: Orders Date Row

Date quick-select pattern used on Orders. It is separate from normal filter chips because it controls the operational order window.

Date Row & Chips

Showing

Today Yesterday This Week Last 7 Days Custom Range

Custom Date Panel

Start Date

End Date

Past Orders Notice

You are viewing past orders from May 1–30, 2026.

Screen: Customer Detail

Restaurant CRM layout for customer profile, metrics, contact details, notes, and related operational context.

Customer Hero

PN

Priya Nair

priya.nair@example.com

Customer Metrics

Total Orders24

Revenue$1,248

Avg. Order$52

Member Since2024

Contact List & Stats

Email: priya.nair@example.com
Phone: +91 98765 43210
Address: 12 Market Road, Kochi

24 orders 3 refunds 8 delivery orders

Notes Form & Notes Layout

Internal Note

Screen: Reports

Report-specific components — metric cards, bar lists, heatmap cells, and the intelligence filter.

Reports Metric Cards

Revenue

$24,800 +8% vs last period

Orders

1,248 +12%

Items Sold

4,901 −3%

Customers

342 No change

Bar List

Margherita Pizza

$4,320

Chicken Burger

$3,540

Veg Biryani

$2,700

Pasta Arrabbiata

$1,860

Monthly Heatmap

Jan$1.2k Feb$1.8k Mar$2.4k Apr$3.1k May$2.8k Jun$2.1k Jul$1.5k Aug$1.9k Sep$2.6k Oct$3.4k Nov$2.9k Dec$3.8k

Intelligence Filter

Period

Location

Orders Export

Download order rows for accounting and operations.

Format: CSV
Fields: Order, customer, total, status

Customers Export

Export contact and lifetime order summary.

Format: CSV
Fields: Name, email, orders, value

Risk Panels & Delta Utilities

Healthy

Rush delays are below target.

Watch

Pickup time is trending higher.

Risk

Cancelled orders need review.

↑ 12% vs last period	Positive movement
↓ 3% vs last period	Negative movement
— 0% vs last period	No meaningful movement

Screen: Tools Page

Tools use restrained cards and WordPress postboxes so utility screens still feel native to wp-admin.

Tool Cards

Re-send Receipts

Send customer receipt emails again after support requests.

Recount Stats

Recalculate order totals and customer lifetime values.

Tools Postbox

System Info

WordPress-native postboxes are normalized inside the tools page without replacing the underlying WP structure.

Screen: Settings Panel

The .rp-settings-panel wraps WordPress's native form-table and overrides its styling with kit tokens. Section nav uses pill chips via .subsubsub.

Restaurant Name	Shown on receipts and the order page.
Currency
Order Notifications	Enable browser push notifications Plays a sound and shows a badge when new orders arrive.

Screen: Discount Form

The add/edit discount form uses .rp-discount-form and .rp-discount-form-table for its layout.

Discount Name
Discount Code	Customers enter this at checkout. SUMMER20
Discount Type
Amount

Screen: Extensions / Add-ons

Extension cards use a flex column layout with a footer that pins actions to the bottom regardless of description length.

Table Reservations

Active

Allow customers to book tables directly from your website. Includes confirmation emails and a management dashboard.

$49 / year

SMS Notifications

Inactive

Send real-time SMS updates to customers when their order status changes.

Advanced Reporting

Free

Detailed analytics including hourly rush heatmaps, menu performance, and customer lifetime value.

Included Install

RestroPress Admin UI Kit

Color Tokens

Typography Tokens

Spacing & Border Radius

Shadows, Transitions & Z-index

Buttons

Badges & Status

Cards

Form Controls

Toggle Switch

Filters & Search

Tabs

Tables

Notices

Empty States

Modals

Date Range Popover

Page Header

Orders

Sales Report

Grid System

Utility Classes

Class Reference

Screen: Orders KPI Row

1,248

$24,800

18 min

342

Screen: Orders Date Row

Screen: Customer Detail

Priya Nair

Screen: Reports

Orders Export

Customers Export

Screen: Tools Page

Re-send Receipts

Recount Stats

System Info

Screen: Settings Panel

Screen: Discount Form

Screen: Extensions / Add-ons

Table Reservations

SMS Notifications

Advanced Reporting