useVyre AI-ready

SaaS Dashboard

App shell, KPIs, and a searchable invoice table — composed from Card, Table, Badge, Input, Avatar, and Progress.

Acme Billing

Overview

Last 30 days · all activity

Revenue

$48,290

+12.4%

Invoices

142

+8 this week

Outstanding

$6,180

3 overdue

Collection rate

94%

Showing 5 of 5 invoices
Invoice	Client	Amount	Status	Date
`INV-1042`	GP Corp	$4,200.00	paid	Apr 28
`INV-1041`	Globex Ltd	$1,860.00	pending	Apr 27
`INV-1040`	Initech	$3,500.00	paid	Apr 26
`INV-1039`	Hooli	$ 720.00	overdue	Apr 24
`INV-1038`	Stark Industry	$9,900.00	paid	Apr 22

Components used

Card — KPI tiles (elevated) and table container (outlined)
Table — invoice list with hoverable rows
Badge — status chips with dot indicator
Input + Field — search
Avatar — user, with status="online"
Progress — collection rate
Button — primary action (variant="accent")

Prompt that produces this layout

With @usevyre/ai-context installed in your agent rules, this prompt yields valid component code on the first try:

Build a SaaS dashboard with useVyre:
- App bar with brand + avatar
- Sidebar nav: Overview, Invoices, Customers, Reports, Settings
- 4 KPI cards (Revenue, Invoices, Outstanding, Collection rate)
- Recent invoices table with search input
- Use Card variant="elevated" for KPIs, "outlined" for the table card
- Status badges: paid=success, pending=warning, overdue=danger

Why this matters: Without AI context, agents commonly invent props like variant="blue" or color="primary" that don't exist in useVyre. The context file constrains generation to actual valid props.