Empty Root

Home Empty Root

The Empty Root component serves as a foundational wrapper for presenting empty states, placeholders, or informational blocks when no data is available.

<?php

use Lib\PHPXUI\{
    EmptyRoot,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle,
    EmptyDescription,
    EmptyContent
};

use Lib\PHPXUI\Button;

use Lib\PPIcons\{
    FolderCode,
    ArrowUpRight
};

?>

<EmptyRoot>
    <EmptyHeader>
        <EmptyMedia variant="icon">
            <FolderCode />
        </EmptyMedia>
        <EmptyTitle>No Projects Yet</EmptyTitle>
        <EmptyDescription>
            You haven't created any projects yet. Get started by creating
            your first project.
        </EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
        <div class="flex gap-2">
            <Button>Create Project</Button>
            <Button variant="outline">Import Project</Button>
        </div>
    </EmptyContent>
    <Button variant="link" asChild="true" class="text-muted-foreground" size="sm">
        <a href="#">
            Learn More
            <ArrowUpRight />
        </a>
    </Button>
</EmptyRoot>

Installation

npm

npx phpxui add EmptyRoot

Usage

use Lib\PHPXUI\{
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
}

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>
      No data found
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>

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

User Offline

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

Avatar Group

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.

/

Need help? Contact support

Empty Root const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add Empty Root'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };