Components — Modern React UI Library

Examples

Default Empty State

Without props, renders the default FileIcon and the translated empty data message.

Default

No data

import { Empty } from "@g4rcez/components";

function DefaultEmpty() {
  return <Empty />;
}

Custom Icon

Pass any Phosphor icon via the Icon prop to match the empty state context.

Custom icons

No archived items

No team members yet

import { Empty } from "@g4rcez/components";
import { ArchiveIcon, UsersIcon } from "@phosphor-icons/react";

function CustomIcons() {
  return (
    <div className="flex flex-col gap-4">
      <Empty Icon={ArchiveIcon} message="No archived items" />
      <Empty Icon={UsersIcon} message="No team members yet" />
    </div>
  );
}

Custom Message

The message prop overrides the default translated string.

Custom message

Your search returned no results. Try a different keyword.

import { Empty } from "@g4rcez/components";

function CustomMessage() {
  return (
    <Empty message="Your search returned no results. Try a different keyword." />
  );
}

When to use Empty

Use when

You need the documented Empty interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Empty behavior you need.

Accessibility

Keep the Empty labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.