Empty

Stabilny

Wyjaśnia, dlaczego nie ma nic do pokazania i co zrobić dalej — przy pierwszym użyciu, braku wyników, gdy wszystko jest już zrobione i przy braku dostępu.

Kod źródłowy Rejestr

examples/empty/demo.tsx

Nie masz jeszcze projektów

Pierwszą aplikację wdrożysz w około minutę.

Anatomia

Nie masz jeszcze projektów

Utwórz projekt, aby zacząć wdrażać.

1KontenerWyśrodkowany stos, który zajmuje miejsce brakującej treści. Na stronach wariant outline dodaje przerywane obramowanie.
2AkcjeJeden jasny następny krok — zwykle akcja, która tworzy pierwszy element.
3GrafikaIkona na wyniesionym kafelku albo ilustracja, która nadaje kontekst.
4OpisJedno zdanie o tym, dlaczego jest pusto i co z tym zrobić.
5TytułMówi prostymi słowami, czego brakuje.

Instalacja

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/empty.json

Użycie

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

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FolderPlusIcon />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>Deploy your first app in about a minute.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Create project</Button>
  </EmptyContent>
</Empty>

Przykłady

Z obramowaniem

variant="outline" rysuje przerywaną ramkę — tak zwyczajowo oznacza się obszar, który czeka na treść, np. strefę upuszczania plików albo wolne miejsce w układzie.

examples/empty/outline.tsx

Prześlij pierwszy zbiór danych

CSV, Parquet lub JSON do 2 GB. Kolumny zostaną wykryte automatycznie.

Brak wyników

Gdy wyszukiwanie lub filtr niczego nie znajduje, powtórz zapytanie, podpowiedz możliwą przyczynę i zaproponuj drogi wyjścia, które nie przekreślają dotychczasowej pracy.

examples/empty/no-results.tsx

Brak wyników dla „zasady zwrotów”

Sprawdź pisownię, użyj mniejszej liczby słów lub usuń filtr „Ostatnie 7 dni”.

Wszystko na bieżąco

Stan pusty bywa dobrą wiadomością. Powiedz to wprost i nie wymyślaj wezwania do działania, gdy nie ma nic do zrobienia.

examples/empty/cleared.tsx

Jesteś na bieżąco

Nie masz oczekujących recenzji. Nowe prośby pojawią się tutaj.

Brak dostępu

Gdy treść istnieje, ale ktoś nie może jej zobaczyć, napisz, czyjej zgody potrzebuje i jak o nią poprosić.

examples/empty/restricted.tsx

Nie masz dostępu do sekcji Płatności

Faktury mogą przeglądać tylko właściciele przestrzeni roboczej. Poproś Mayę Chen o dostęp.

W karcie

W karcie lub tabeli stan pusty zajmuje miejsce treści — tytuł i akcje wokół niego zostają, więc kontekst nigdy nie ginie.

examples/empty/in-card.tsx

Integracje

Synchronizuj zdarzenia wdrożeń ze swoimi narzędziami.

Brak połączonych integracji

Połącz Slacka lub Lineara, aby publikować informacje o wdrożeniach tam, gdzie pracuje twój zespół.

Wersję dla tabel pokazuje przykład pustej tabeli.

Wytyczne

Kiedy używać

Pierwsze użycie. Funkcja nie ma jeszcze danych. Wyjaśnij, co daje, i zaproponuj pierwszy krok.
Brak wyników. Wyszukiwanie lub filtr niczego nie znalazły.
Wszystko załatwione. Nie zostało nic do zrobienia — pusta skrzynka odbiorcza, opróżniona kolejka przeglądów.
Brak dostępu. Treść istnieje, ale brakuje uprawnień, żeby ją zobaczyć.

Kiedy nie używać

Przy błędach, które przerywają zadanie — użyj komponentu Alert z akcją, która pozwala naprawić problem.
Podczas ładowania danych — użyj komponentu Skeleton w kształcie treści. Nigdy nie pozwól, by stan pusty mignął, zanim dane dotrą.

Jak pisać

Tytuł — opisz sytuację prostymi słowami: Nie masz jeszcze projektów, Brak wyników dla „polityka zwrotów”. Unikaj obwiniania i wykrzykników.
Opis — jedno lub dwa zdania o tym, dlaczego jest pusto i co będzie dalej.
Akcje — jedna główna akcja, która wypełni puste miejsce. Drugą dodaj tylko wtedy, gdy istnieje realna alternatywa.

Nie masz jeszcze faktur

Faktury pojawią się tutaj po pierwszym okresie rozliczeniowym.

Dobrze.Konkretny tytuł, pomocny następny krok, jedna akcja.

Ups! Nic tu nie ma!

Chyba pusto…

Źle.Ogólnikowy, emocjonalny tekst bez wyjaśnienia i bez następnego kroku.

Użyj ikony w EmptyMedia variant="icon" — od razu mówi, jakiego obiektu brakuje. Ilustracje zachowaj dla stanów pierwszego użycia na ekranach o marketingowym charakterze; w gęstym interfejsie produktu konkurują z treścią wokół nich.

Dostępność

To treść, nie alert. Stan pusty to zwykła treść — nie nadawaj mu role="alert". Gdy pojawia się w odpowiedzi na wyszukiwanie, ogłoś zamiast tego liczbę wyników w regionie na żywo w trybie polite („0 wyników”).
Tytuł domyślnie nie jest nagłówkiem. EmptyTitle renderuje <div>. Gdy stan pusty zajmuje całą stronę lub sekcję, umieść w nim nagłówek odpowiedniego poziomu.
Ikony są dekoracyjne. Znaczenie niesie tytuł; ikony w EmptyMedia nie potrzebują etykiet.
Fokus. Gdy ktoś wyczyści filtr przyciskiem w stanie pustym, przenieś fokus na wyniki lub pole wyszukiwania, żeby osoby korzystające z klawiatury nie straciły orientacji.

Dokumentacja API

Empty

Wyśrodkowany kontener z wewnętrznymi odstępami. Przyjmuje wszystkie propsy div.

Prop	Typ	Domyślnie
`variant` Wartość outline dodaje przerywaną ramkę wokół obszarów, które czekają na treść.	`"default" \| "outline"`	`"default"`

EmptyMedia

Prop	Typ	Domyślnie
`variant` Wartość icon umieszcza ikonę na wyniesionym kafelku o boku 44 px. Wartość default zostawia slot bez stylów — na ilustracje.	`"default" \| "icon"`	`"default"`