Empty state
What to show when there is nothing to show, with a next step.
No projects
No projects yet
Create your first project to start collecting feedback from your team.
<div class="mn-empty" style="max-width:30rem">
<div class="mn-empty-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z"/></svg></div>
<h3 class="mn-empty-title">No projects yet</h3>
<p class="mn-empty-desc">Create your first project to start collecting feedback from your team.</p>
<button class="mn-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> New project</button>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/empty-state.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-empty | Container. |
| mn-empty-icon · mn-empty-title · mn-empty-desc | Parts. |
Accessibility
- Make the title a heading at the right level so the state is discoverable in the outline.