Blocks

Pre-composed UI patterns built from TetrisUI primitives. Copy these as starting points for common views. Every block composes only from the component library; no custom CSS.

Login

Authentication form with email, password, remember me, and social sign-in.

Welcome back

Sign in to your account

Forgot?

Customer Detail

Full account view with avatar, KPIs, integration table, activity feed, and notes.

ME

Mezcla

Live

Sarah Chen . [email protected] . Active since Jan 2024

$2,400MRR+$200
92Health Score+4
847Orders Synced+23 this week
IntegrationStatusLast SyncRecords
QuickBooks OnlineConnected3 min ago1,247
SPS CommerceConnected12 min ago394
ShopifyPending setupNever0

Inventory Table

SKU table with stock levels, reorder thresholds, location filter, and status badges.

Inventory

5 SKUs across 2 warehouses

SKUProductStockReorder atLocationStatus
MZC-001Organic Hot Sauce (6oz)1,247200Warehouse AIn Stock
MZC-002Organic Hot Sauce (12oz)89100Warehouse ALow Stock
MZC-003Habanero Blend (6oz)0150Warehouse BOut of Stock
KHW-001Single Origin Dark Roast534100Warehouse AIn Stock
KHW-002Light Roast Blend6775Warehouse BLow Stock

Invoice

Line-item invoice with subtotal, tax, and actions.

Invoice #INV-2024-047

Mezcla . Due Apr 30, 2026

Pending
DescriptionQtyRateTotal
QuickBooks Integration Setup1$2,500$2,500
SPS Commerce Configuration1$1,800$1,800
Monthly Platform Fee (Pro)1$499$499
Data Migration (847 SKUs)847$0.5$423.5
Subtotal$5,222.5
Tax (8.75%)$456.97
Total$5679.47

Team Members

Member list with avatars, roles, status badges, and role management.

Team

5 members

WJ

Wiley Jones

CEO

Active
AM

Arnav Mishra

VP Engineering

Active
LK

Luke Kim

Head of PMO

Active
JT

Jaylen Torres

EDI Specialist

Active
JP

Josh Park

Designer

Invited

Settings Panel

Toggle-based notification preferences with save/cancel actions.

Notification Settings

Choose how you want to be notified.

Email notifications

Receive sync status and error alerts.

Slack alerts

Post to #ops-alerts on failures.

Weekly digest

Summary of all activity, sent Mondays.

Marketing emails

Product updates and feature announcements.

Onboarding Checklist

Progress tracker for customer setup with checkbox steps.

Getting Started

3 of 6 complete

50%
Create accountDone
Connect QuickBooksDone
Import inventoryDone
Set up SPS Commerce
Configure PO workflows
Invite team members

Pricing Table

Three-tier pricing cards with feature lists and CTAs.

Starter

$249/mo
Up to 10 customers
QuickBooks integration
Email support
Basic reporting

Pro

$499/mo
Unlimited customers
All integrations (60+)
Priority support
Advanced analytics
Custom workflows
API access

Enterprise

Custom
Everything in Pro
Dedicated CSM
SLA guarantee
Custom integrations
On-premise option
SOC 2 compliance

Analytics Cards

KPI cards with sparklines, progress bars, and stat grids.

Orders Today

284

+12.5% from yesterday

Sync Errors

3

+2 since last hour

Sync Performance

Last 7 days

Healthy
847

Records synced

23ms

Avg latency

99.7%

Success rate

3

Failed jobs

File Upload

Drag-and-drop upload area with file list and import action.

Import Data

Upload a CSV or Excel file to import inventory records.

Drop files here or click to browse

CSV, XLSX up to 10MB

inventory-export-2024.csv

2.4 MB

Ready

Command Bar

Search input with keyboard shortcut hint.

Search customers, orders, POs...
CmdK

Notification Center

Activity feed with read/unread states, timestamps, and action buttons.

Notifications

2 new

PO #4891 synced

Mezcla. All 23 line items matched.

2m

QuickBooks sync failed

SEB Brewing. Connection timed out after 30s.

14m

New customer added

Luminary Foods onboarding started.

1h

SPS labels generated

BDF Industries. 12 labels ready for print.

2h

Weekly report ready

7-day sync summary for all accounts.

1d

User Profile

Profile card with avatar, details, stats, and quick actions.

WJ

Wiley Jones

CEO, Co-founder

[email protected]

76

Customers

52

Team

67

Integrations

Alert Stack

System notification banners with semantic variants.