Components / Empty

Empty

An empty-state placeholder for when there's nothing to show: a centered icon or illustration, a title, a description, and an optional action. Pure Tailwind, composed from a small family of slots.

Examples

The icon EmptyMedia variant renders a muted rounded tile; pair it with a title, description, and an action in EmptyContent.

No projects yet

Create your first project to get started. It only takes a few seconds.

razor

<ZitsEmpty class="border">
    <ZitsEmptyHeader>
        <ZitsEmptyMedia Variant="icon">
            <FileIcon />
        </ZitsEmptyMedia>
        <ZitsEmptyTitle>No projects yet</ZitsEmptyTitle>
        <ZitsEmptyDescription>
            Create your first project to get started. It only takes a few seconds.
        </ZitsEmptyDescription>
    </ZitsEmptyHeader>
    <ZitsEmptyContent>
        <ZitsButton>Create project</ZitsButton>
    </ZitsEmptyContent>
</ZitsEmpty>

Outline

The container ships with border-dashed baked in; add a border utility to draw the dashed outline.

No results found

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

razor

<ZitsEmpty class="border">
    <ZitsEmptyHeader>
        <ZitsEmptyMedia Variant="icon">
            <SearchIcon />
        </ZitsEmptyMedia>
        <ZitsEmptyTitle>No results found</ZitsEmptyTitle>
        <ZitsEmptyDescription>
            Try adjusting your search or filters to find what you're looking for.
        </ZitsEmptyDescription>
    </ZitsEmptyHeader>
</ZitsEmpty>

Anatomy

Compose the slots in this order. EmptyHeader groups the media, title, and description; EmptyContent holds the action.

razor

<ZitsEmpty>
    <ZitsEmptyHeader>
        <ZitsEmptyMedia Variant="icon">...</ZitsEmptyMedia>
        <ZitsEmptyTitle>...</ZitsEmptyTitle>
        <ZitsEmptyDescription>...</ZitsEmptyDescription>
    </ZitsEmptyHeader>
    <ZitsEmptyContent>...</ZitsEmptyContent>
</ZitsEmpty>

Installation

Terminal bash

navius add empty

API reference

ZitsEmptyMedia takes a Variant; every other part is a styled container that splats unmatched attributes and merges class.

Prop	Type	Default
ZitsEmpty	container	-
ZitsEmptyHeader	container	-
ZitsEmptyMedia.Variant	string	"default"
ZitsEmptyTitle	container	-
ZitsEmptyDescription	container	-
ZitsEmptyContent	container	-