Acronis UIKit
Legacy (shadcn-uikit)Components

Empty

A placeholder shown when there is no content or data to display.

Usage

import {
  Empty,
  EmptyIcon,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyActions,
} from '@acronis-platform/shadcn-uikit';

Basic

A simple empty state with an icon and message.

No messages

You don't have any messages yet. When you receive messages, they will appear here.

Preview
View source
import {
  Empty,
  EmptyIcon,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
} from '@acronis-platform/shadcn-uikit/react';
import { MailboxIcon } from '@acronis-platform/shadcn-uikit';
export function EmptyBasic() {
  return (
    <div className="flex min-h-[300px] items-center justify-center border rounded-lg bg-gray-50">
      <Empty>
        <EmptyIcon className="text-primary">
          <MailboxIcon className="h-[72px] w-[72px]" />
        </EmptyIcon>
        <EmptyHeader>
          <EmptyTitle>No messages</EmptyTitle>
          <EmptyDescription>
            You don&apos;t have any messages yet. When you receive messages,
            they will appear here.
          </EmptyDescription>
        </EmptyHeader>
      </Empty>
    </div>
  );
}

With action

An empty state with a call-to-action button.

No files

Get started by uploading your first file.

Preview
View source
import {
  Empty,
  EmptyIcon,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyActions,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { FolderIcon } from '@acronis-platform/shadcn-uikit';
export function EmptyWithAction() {
  return (
    <div className="flex min-h-[300px] items-center justify-center border rounded-lg bg-gray-50">
      <Empty>
        <EmptyIcon className="h-24 w-24">
          <FolderIcon className="text-[#2668C5]" />
        </EmptyIcon>
        <EmptyHeader>
          <EmptyTitle>No files</EmptyTitle>
          <EmptyDescription>
            Get started by uploading your first file.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyActions>
          <Button>Upload File</Button>
        </EmptyActions>
      </Empty>
    </div>
  );
}

An empty state with both a button and a text link.

No results found

We couldn't find any results matching your search. Try adjusting your filters.

View all items
Preview
View source
import {
  Empty,
  EmptyIcon,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyActions,
  EmptyLinks,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { SearchIcon } from '@acronis-platform/shadcn-uikit';
export function EmptyWithButtonAndLink() {
  return (
    <div className="flex min-h-[300px] items-center justify-center border rounded-lg bg-gray-50">
      <Empty>
        <EmptyIcon className="h-24 w-24">
          <SearchIcon className="text-[#2668C5]" />
        </EmptyIcon>
        <EmptyHeader>
          <EmptyTitle>No results found</EmptyTitle>
          <EmptyDescription>
            We couldn&apos;t find any results matching your search. Try
            adjusting your filters.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyActions>
          <Button>Clear Filters</Button>
          <EmptyLinks>
            <a
              href="#"
              className="text-sm font-semibold text-[#2668C5] hover:underline"
            >
              View all items
            </a>
          </EmptyLinks>
        </EmptyActions>
      </Empty>
    </div>
  );
}

An empty state with multiple navigation links.

No team members

Start collaborating by inviting team members to your workspace.

Learn moreView documentation
Preview
View source
import {
  Empty,
  EmptyIcon,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyActions,
  EmptyLinks,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { UsersIcon } from '@acronis-platform/shadcn-uikit';
export function EmptyWithMultipleLinks() {
  return (
    <div className="flex min-h-[300px] items-center justify-center border rounded-lg bg-gray-50">
      <Empty>
        <EmptyIcon className="h-24 w-24">
          <UsersIcon className="text-[#2668C5]" />
        </EmptyIcon>
        <EmptyHeader>
          <EmptyTitle>No team members</EmptyTitle>
          <EmptyDescription>
            Start collaborating by inviting team members to your workspace.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyActions>
          <Button>Invite Team Members</Button>
          <EmptyLinks>
            <a
              href="#"
              className="text-sm font-semibold text-[#2668C5] hover:underline"
            >
              Learn more
            </a>
            <a
              href="#"
              className="text-sm font-semibold text-[#2668C5] hover:underline"
            >
              View documentation
            </a>
          </EmptyLinks>
        </EmptyActions>
      </Empty>
    </div>
  );
}

An empty state with only link-based actions.

No documents

You haven't created any documents yet.

Browse templatesImport from file
Preview
View source
import {
  Empty,
  EmptyIcon,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyActions,
  EmptyLinks,
} from '@acronis-platform/shadcn-uikit/react';
import { FileTextIcon } from '@acronis-platform/shadcn-uikit';
export function EmptyOnlyLinks() {
  return (
    <div className="flex min-h-[300px] items-center justify-center border rounded-lg bg-gray-50">
      <Empty>
        <EmptyIcon className="h-24 w-24">
          <FileTextIcon className="text-[#2668C5]" />
        </EmptyIcon>
        <EmptyHeader>
          <EmptyTitle>No documents</EmptyTitle>
          <EmptyDescription>
            You haven&apos;t created any documents yet.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyActions>
          <EmptyLinks>
            <a
              href="#"
              className="text-sm font-semibold text-[#2668C5] hover:underline"
            >
              Browse templates
            </a>
            <a
              href="#"
              className="text-sm font-semibold text-[#2668C5] hover:underline"
            >
              Import from file
            </a>
          </EmptyLinks>
        </EmptyActions>
      </Empty>
    </div>
  );
}

Error state

An empty state indicating an error condition.

Failed to load content

An error occurred while loading content. Please refresh the page and try again.

Details
Preview
View source
import {
  Empty,
  EmptyIcon,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyActions,
  EmptyLinks,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { TimesCircleIcon } from '@acronis-platform/shadcn-uikit';
export function EmptyError() {
  return (
    <div className="flex min-h-[300px] items-center justify-center border rounded-lg bg-gray-50">
      <Empty>
        <EmptyIcon className="h-24 w-24">
          <TimesCircleIcon className="text-red-500" />
        </EmptyIcon>
        <EmptyHeader>
          <EmptyTitle>Failed to load content</EmptyTitle>
          <EmptyDescription>
            An error occurred while loading content. Please refresh the page and
            try again.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyActions>
          <Button>Try Again</Button>
          <EmptyLinks>
            <a
              href="#"
              className="text-sm font-semibold text-[#2668C5] hover:underline"
            >
              Details
            </a>
          </EmptyLinks>
        </EmptyActions>
      </Empty>
    </div>
  );
}

Various states

Multiple empty state variations for different scenarios.

Preview
View source
import {
  Empty,
  EmptyIcon,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyActions,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  CalendarIcon,
  MailIcon,
  ShoppingCartIcon,
} from '@acronis-platform/shadcn-uikit';
import { DatabaseIcon } from '../icons/missing-icons';
export function EmptyVariousStates() {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <div className="flex min-h-[250px] items-center justify-center border rounded-lg bg-gray-50">
        <Empty>
          <EmptyIcon className="h-24 w-24">
            <DatabaseIcon className="text-[#2668C5]" />
          </EmptyIcon>
          <EmptyHeader>
            <EmptyTitle>No data available</EmptyTitle>
            <EmptyDescription>
              There is no data to display at this time.
            </EmptyDescription>
          </EmptyHeader>
        </Empty>
      </div>

      <div className="flex min-h-[250px] items-center justify-center border rounded-lg bg-gray-50">
        <Empty>
          <EmptyIcon className="h-24 w-24">
            <ShoppingCartIcon className="text-[#2668C5]" />
          </EmptyIcon>
          <EmptyHeader>
            <EmptyTitle>Cart is empty</EmptyTitle>
            <EmptyDescription>
              Add items to your cart to get started.
            </EmptyDescription>
          </EmptyHeader>
          <EmptyActions>
            <Button variant="outline">Browse Products</Button>
          </EmptyActions>
        </Empty>
      </div>

      <div className="flex min-h-[250px] items-center justify-center border rounded-lg bg-gray-50">
        <Empty>
          <EmptyIcon className="h-24 w-24">
            <CalendarIcon className="text-[#2668C5]" />
          </EmptyIcon>
          <EmptyHeader>
            <EmptyTitle>No events scheduled</EmptyTitle>
            <EmptyDescription>
              Create your first event to get started.
            </EmptyDescription>
          </EmptyHeader>
          <EmptyActions>
            <Button>Create Event</Button>
          </EmptyActions>
        </Empty>
      </div>

      <div className="flex min-h-[250px] items-center justify-center border rounded-lg bg-gray-50">
        <Empty>
          <EmptyIcon className="h-24 w-24">
            <MailIcon className="text-[#2668C5]" />
          </EmptyIcon>
          <EmptyHeader>
            <EmptyTitle>Inbox is empty</EmptyTitle>
            <EmptyDescription>You&apos;re all caught up!</EmptyDescription>
          </EmptyHeader>
        </Empty>
      </div>
    </div>
  );
}

Discovery agent

An empty state for agent-based discovery flows.

Discovery agent

The discovery agent will locate the Hyper-V addresses for using NetBIOS discovery, and Service Discovery (SRVS), and Acronis Resource Protocol (ARP) table.

Learn moreSettings
Preview
View source
import {
  Empty,
  EmptyIcon,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyActions,
  EmptyLinks,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { ExclamationCircleIcon } from '@acronis-platform/shadcn-uikit';
export function EmptyDiscoveryAgent() {
  return (
    <div className="flex min-h-[350px] items-center justify-center border rounded-lg bg-gray-50">
      <Empty>
        <EmptyIcon className="h-24 w-24">
          <ExclamationCircleIcon className="text-[#2668C5]" />
        </EmptyIcon>
        <EmptyHeader>
          <EmptyTitle>Discovery agent</EmptyTitle>
          <EmptyDescription>
            The discovery agent will locate the Hyper-V addresses for using
            NetBIOS discovery, and Service Discovery (SRVS), and Acronis
            Resource Protocol (ARP) table.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyActions>
          <Button>Configure</Button>
          <EmptyLinks>
            <a
              href="#"
              className="text-sm font-semibold text-[#2668C5] hover:underline"
            >
              Learn more
            </a>
            <a
              href="#"
              className="text-sm font-semibold text-[#2668C5] hover:underline"
            >
              Settings
            </a>
          </EmptyLinks>
        </EmptyActions>
      </Empty>
    </div>
  );
}

API Reference

All Empty sub-components (Empty, EmptyIcon, EmptyHeader, EmptyTitle, EmptyDescription, EmptyActions) extend React.ComponentProps<'div'> with consistent styling for empty state displays.

Edit on GitHub

DataTable

A feature-rich table with sorting, filtering, and pagination.

Filter

A control for narrowing down content by applying filter criteria.

On this page

UsageBasicWith actionWith button and linkWith multiple linksLinks onlyError stateVarious statesDiscovery agentAPI Reference