Empty

Use to display an empty state, when there is nothing to show yet.

No results found

Try adjusting your search or filters to find what you are looking for.

Installation

uvx django_shadcn@latest add empty

Usage

<c-empty>
  <c-empty.header>
    <c-empty.media variant="icon">
      <c-icon name="search" />
    </c-empty.media>
    <c-empty.title>No results found</c-empty.title>
    <c-empty.description>Try a different search.</c-empty.description>
  </c-empty.header>
  <c-empty.content>
    <c-button variant="outline">Clear filters</c-button>
  </c-empty.content>
</c-empty>

The border is dashed but no border width is applied, exactly as upstream. Add border when you want the outline to show.

Examples

Outline

No projects

Projects you create will show up here.

<c-empty class="border">...</c-empty>

Without media

Nothing here yet

Read the introduction to get started.

<c-empty>
  <c-empty.header>
    <c-empty.title>Nothing here yet</c-empty.title>
    <c-empty.description>Read the docs to get started.</c-empty.description>
  </c-empty.header>
</c-empty>

Loading

Loading projects

This will only take a moment.

<c-empty.media>
  <c-spinner class="size-6" />
</c-empty.media>