Empty

Empty is a component that displays an empty placeholder when no data is available.

default

No Data

custom indicator

No Data

import Empty from "@/components/ui/Empty";
import Image from "next/image";

export default function Page() {
  return (
    <>
      <Empty className="h-40" indicator={<Image src="/images/empty-taken.svg" width={256} height={265} alt="empty taken" className="size-24" />} />
    </>
  )
}

custom description

Ops! No data available

import Empty from "@/components/ui/Empty";

export default function Page() {
  return (
    <>
       <Empty className="h-40" description={<p className="text-sm text-red-500">Ops! No data available</p>} />
    </>
  )
}

use in table

Name	Age	Address	Company	Status
No Data

import Empty from "@/components/ui/Empty";
import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@/components/ui/Table';

export default function Page() {
  return (
    <>
       <Empty className="h-40" description={<p className="text-sm text-red-500">Ops! No data available</p>} />
       <Table>
          <TableHeader>
            <TableRow>
              <TableHeaderCell>Name</TableHeaderCell>
              <TableHeaderCell>Age</TableHeaderCell>
              <TableHeaderCell>Address</TableHeaderCell>
              <TableHeaderCell>Company</TableHeaderCell>
              <TableHeaderCell>Status</TableHeaderCell>
            </TableRow>
          </TableHeader>
          <TableBody className="relative h-40">
            <Empty inTable />
          </TableBody>
        </Table>
    </>
  )
}