Thành phần

Empty

Empty state: ink hairline, tracked kicker, Playfair headline, serif sentence and an optional ink drawing or icon slot.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

No filings

Nothing has been filed yet

Notices appear here once the first tender is published. Until then the register is blank.

Install

bash

npx shadcn add @eloquent/empty

Usage

tsx

import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyKicker, EmptyMedia, EmptyTitle } from "@/components/ui/empty";

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon"><InboxIcon aria-hidden="true" /></EmptyMedia>
    <EmptyKicker>No filings</EmptyKicker>
    <EmptyTitle>Nothing has been filed yet</EmptyTitle>
    <EmptyDescription>Notices appear here once the first tender is published.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Publish a notice</Button>
  </EmptyContent>
</Empty>

EmptyTitle renders an h3. Pass as to match the page's heading level. Put an ink drawing in EmptyMedia (the default variant is a bare slot) and mark it aria-hidden.

States

Title only

No results for “tender”

Try a shorter term, or browse the register.

State	Treatment
Default	A 1px ink hairline opens the block; content is centred
`EmptyMedia variant="icon"`	48px square with a 1px ink rule and an ink icon
Links in the description	Underlined; 2px ink outline with a 2px offset on focus

An empty block has no hover effect.

Keyboard

Key	Action
Tab / Shift+Tab	Move through the links and buttons inside, in source order
Enter	Follow a link or press a button
Space	Press a button

The block itself is not focusable.

Vietnamese

Chưa có hồ sơ

Chưa có thông báo nào được nộp

Thông báo sẽ xuất hiện tại đây khi gói thầu đầu tiên được đăng. Cho đến lúc đó, sổ đăng ký còn trống.

Ink adaptation

Upstream shadcn's dashed rounded border and muted copy are removed. A hairline opens the block, the kicker is Barlow in tracked capitals, the title is Playfair Display 900 and the description is Source Serif 4 in full ink. EmptyKicker is an addition for the brand's kicker-then-headline pattern.