Empty

No Projects Yet

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

InstallTerminal

npm install github:A3S-Lab/UI#d2799d3914d2d291fbf0c2c3e638e2380ce266c0

<section class="empty">
  <header>
    <figure><svg class="lucide lucide-folder-code" 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" data-variant="outline">Import Project</button>
    </div>
    <a href="#" class="btn text-muted-foreground" data-variant="link" data-size="sm">
      Learn More
<svg class="lucide lucide-arrow-up-right" 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>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Empty component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/empty.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Add your empty HTML

Add class="empty" to a semantic container. The component styles common children like header, figure, headings, descriptions, and footer.

<section class="empty">
  <header>
    <figure><svg class="lucide lucide-folder-code" 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" data-variant="outline">Import Project</button>
    </div>
    <a href="#" class="btn text-muted-foreground" data-variant="link" data-size="sm">
      Learn More
<svg class="lucide lucide-arrow-up-right" 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

<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.

<section class="empty border border-dashed">
  <header>
    <figure><svg class="lucide lucide-cloud" 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="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" /></svg></figure>
    <h3>Cloud Storage Empty</h3>
    <p>Upload files to your cloud storage to access them anywhere.</p>
  </header>
  <footer>
    <button class="btn" data-variant="outline" data-size="sm">Upload Files</button>
  </footer>
</section>

Background

No Notifications

You're all caught up. New notifications will appear here.

<section class="empty h-full bg-muted/30">
  <header>
    <figure><svg class="lucide lucide-bell" 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.268 21a2 2 0 0 0 3.464 0" /><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></svg></figure>
    <h3>No Notifications</h3>
    <p class="max-w-xs text-pretty">You're all caught up. New notifications will appear here.</p>
  </header>
  <footer>
    <button class="btn" data-variant="outline"><svg class="lucide lucide-refresh-ccw" 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="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" /><path d="M16 16h5v5" /></svg>
      Refresh
    </button>
  </footer>
</section>

Avatar

User Offline

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

<section class="empty">
  <header>
    <figure class="size-12 rounded-full">
      <A3SAssetImage class="grayscale" alt="@shadcn" path="/assets/images/avatar-1.png" />
    </figure>
    <h3>User Offline</h3>
    <p>This user is currently offline. You can leave a message to notify them or try again later.</p>
  </header>
  <footer>
    <button class="btn" data-size="sm">Leave Message</button>
  </footer>
</section>

Avatar group

No Team Members

Invite your team to collaborate on this project.

<section class="empty">
  <header>
    <figure class="-space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-12 [&_img]:rounded-full">
      <A3SAssetImage alt="@shadcn" path="/assets/images/avatar-1.png" />
      <A3SAssetImage alt="@maxleiter" path="/assets/images/avatar-3.png" />
      <A3SAssetImage alt="@evilrabbit" path="/assets/images/avatar-2.png" />
    </figure>
    <h3>No Team Members</h3>
    <p>Invite your team to collaborate on this project.</p>
  </header>
  <footer>
    <button class="btn" data-size="sm"><svg class="lucide lucide-plus" 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="M5 12h14" /><path d="M12 5v14" /></svg>
      <span>Invite Members</span>
    </button>
  </footer>
</section>

Input group

404 - Not Found

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

<section class="empty">
  <header>
    <h3>404 - Not Found</h3>
    <p>The page you're looking for doesn't exist. Try searching for what you need below.</p>
  </header>
  <footer>
    <div class="input-group sm:w-3/4">
      <input type="search" aria-label="Search pages" placeholder="Try searching for pages..." />
      <span data-align="start" aria-hidden="true"><svg class="lucide lucide-search" 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="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg></span>
      <span data-align="end"><kbd class="kbd">/</kbd></span>
    </div>
    <p>Need help? <a href="#">Contact support</a></p>
  </footer>
</section>

RTL

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

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

<section class="empty" dir="rtl">
  <header>
    <figure><svg class="lucide lucide-folder-code" 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>لا توجد مشاريع بعد</h3>
    <p>لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.</p>
  </header>
  <footer>
    <div class="flex flex-row justify-center gap-2">
      <button class="btn">إنشاء مشروع</button>
      <button class="btn" data-variant="outline">استيراد مشروع</button>
    </div>
    <a href="#" class="btn text-muted-foreground" data-variant="link" data-size="sm">
      تعرف على المزيد
      <svg class="lucide lucide-arrow-up-right rtl:rotate-270" data-icon="inline-end" 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>

#Empty

#Usage

Include CSS

Add your empty HTML

#HTML structure

#Examples

#Outline

#Background

#Avatar

#Avatar group

#Input group

#RTL