Empty

Display empty states with icons, titles, descriptions, and actions.

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

Usage

Use .empty on a semantic container. The component styles common children like <header>, <figure>, headings, descriptions, and <footer>.

HTML


<section class="empty">
  <header>
    <figure>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 10.5 8 13l2 2.5" /><path d="m14 10.5 2 2.5-2 2.5" /><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z" /></svg>
    </figure>
    <h3>No Projects Yet</h3>
    <p>You haven't created any projects yet. Get started by creating your first project.</p>
  </header>
  <footer>
    <div class="flex gap-2">
      <button class="btn">Create Project</button>
      <button class="btn-outline">Import Project</button>
    </div>
    <a href="#" class="btn-link text-muted-foreground">
      Learn More
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10" /><path d="M7 17 17 7" /></svg>
    </a>
  </footer>
</section>

HTML structure

The component has the following HTML structure:

<section class="empty">
The empty-state container.
<header>
Groups the media, title, and description.
<figure> Optional
Icon, avatar, image, or avatar group. An icon-only figure is styled automatically with :has(> svg:only-child).
<h2>, <h3>, or <h4>
The empty-state title.
<p> Optional
The empty-state description.
<section> or <footer> Optional
Actions and supporting content.

Examples

Outline

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

Avatar

@shadcn

User Offline

This user is currently offline. You can leave a message or try again later.

Avatar Group

@hunvreus @shadcn @adamwathan

No Team Members

Invite your team to collaborate on this project.

Input Group

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

RTL

لا توجد مشاريع بعد

ابدأ بإنشاء مشروعك الأول.