Empty

Dropdown Menu
Field

Empty

No Projects Yet

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

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

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

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/empty.css";
@import "basecoat-css/styles/vega.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.

Background

No Notifications

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

Avatar

@shadcn

User Offline

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

Avatar group

@shadcn@maxleiter@evilrabbit

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

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

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