Empty State
A blank-slate surface that explains what is missing and points the user toward the next action.
Uses
aihio-card
aihio-button
Intents
surface
informational
primary-action
secondary-action
Pattern
Live, over the markup an agent gets from the MCP server's get_pattern. Narrow the preview to see
the layout answer to its own width rather than the window's.
Empty State
Projects organize deployments, environments, and release notes for your team.
<aihio-card data-aihio-intent="surface">
<aihio-card-header>
<aihio-card-title>No projects yet</aihio-card-title>
<aihio-card-description>Create your first project to start collecting feedback.</aihio-card-description>
</aihio-card-header>
<aihio-card-content>
<p>Projects organize deployments, environments, and release notes for your team.</p>
</aihio-card-content>
<aihio-card-footer>
<aihio-button data-aihio-intent="secondary-action" variant="outline">Import from CSV</aihio-button>
<aihio-button data-aihio-intent="primary-action">Create project</aihio-button>
</aihio-card-footer>
</aihio-card>Variations
Other shapes of the same pattern, each as lint-clean as the first.
Search Results
No-results variant that suggests clearing filters before creating a new item.
Your current filters are hiding every matching workspace and archived project.
<aihio-card data-aihio-intent="surface">
<aihio-card-header>
<aihio-card-title>No results for "ops"</aihio-card-title>
<aihio-card-description>Try a broader term or remove one of your filters.</aihio-card-description>
</aihio-card-header>
<aihio-card-content>
<p>Your current filters are hiding every matching workspace and archived project.</p>
</aihio-card-content>
<aihio-card-footer>
<aihio-button data-aihio-intent="secondary-action" variant="outline">Clear filters</aihio-button>
<aihio-button data-aihio-intent="primary-action">Create new project</aihio-button>
</aihio-card-footer>
</aihio-card>