Patterns

Composed patterns

Real-world layouts built from the component library. Each pattern is meant to be lifted, adapted, and shipped — not just admired.

Dashboard

Sidebar nav + stat cards + chart + activity list. The canonical operational view.

Components used: Button · Card · Tag & Badge · Avatar · Sidebar · Tabs · Status Chip

app.tinywire.example / dashboard
Dashboard
Operational overview · last updated 32s ago
Active dials
2,481
↑ 12.4% vs last week
Connection rate
68%
↑ 2.1pp
Failed connections
3.2%
↑ 0.8pp
Avg. handle time
4:12
↓ 18s
Dial volume
Hourly throughput · last 24h
00:0006:0012:0018:0024:00
Recent activity
SC
Sasha updated High-value renewals
2 min ago
TO
Tobi rolled back dial speed change
14 min ago
JL
Jamie flagged 3 numbers for review
38 min ago
Eval window closed · all thresholds OK
1h ago

Data Table with Filters

Toolbar + searchable + filterable + paginated table. Status chips and bulk actions baked in.

Components used: Button · Card · Input · Checkbox · Tag & Badge · Status Chip · Avatar · Table · Pagination

app.tinywire.example / agents
Agents
24 active · 8 on call · 2 away
Agent Role Status Last active Calls / day FCR
SC
Sasha Chen
sasha@acme.com
 Senior Agent Available 2m ago 84 2.1%
TO
Tobi Okafor
tobi@acme.com
 Manager On call Now 62 2.8%
JL
Jamie Lee
jamie@acme.com
 Agent Away 23m ago 47 4.2%
MR
Maya Rivera
maya@acme.com
 Senior Agent Available 4m ago 91 1.9%
AK
Alex Kim
alex@acme.com
 Agent Issue 1h ago 12 5.8%
Showing 1–5 of 34 agents

Empty states

First-run, no-results, and error placeholders. Each communicates what happened AND what to do next.

Components used: Button · Card · Empty State

No projects yet
Create your first project to start tracking dialing campaigns and team performance.
No results for "renew"
Try different keywords, or reset the filters to see all results.
Couldn't load data
We hit an error reaching the analytics service. Your data is safe — try again in a moment.
All caught up
You've reviewed everything for this period. New activity will appear here.

Login

Centered auth card with social options and inline validation.

Components used: Button · Card · Input · Checkbox · Status Chip

app.tinywire.example / login

Settings

Form-heavy page with sectioned cards and a section-anchor sidebar.

Components used: Button · Card · Input · Switch · Avatar · Tabs · Breadcrumb · Status Chip

app.tinywire.example / settings
Account settings
Profile

This information will be displayed publicly on your profile.

SC

We'll send a verification link if you change this.

Notifications

Choose how you want to be notified about workspace activity.

Threshold breaches
When FCR exceeds warn or pause levels.
Team mentions
When someone @mentions you in a comment.
Weekly summary
Monday morning recap of the past week.
Marketing emails
Product updates and tips.
Danger zone

These actions are permanent and cannot be undone.

Delete account
Permanently remove your account and all data.