Empty

空の状態を表示するには、Empty コンポーネントを使用します。

プロジェクトはまだありません

まだプロジェクトを作成していません。最初のプロジェクトを作成して始めましょう。

import { IconFolderCode } from "@tabler/icons-react"
import { ArrowUpRightIcon } from "lucide-react"

インストール


pnpm dlx shadcn@latest add empty

使い方

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

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

構成

Empty 状態を構築するには、次の構成を使用します。

Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent

アウトライン

border ユーティリティクラスを使用して、アウトラインの空の状態を作成します。

クラウドストレージが空です

ファイルをクラウドストレージにアップロードすると、どこからでもアクセスできます。

import { IconCloud } from "@tabler/icons-react"

import { Button } from "@/components/ui/radix/button"

背景

bg-* および bg-gradient-* ユーティリティを使用して、空の状態に背景を追加します。

通知はありません

すべて確認済みです。新しい通知はここに表示されます。

import { IconBell } from "@tabler/icons-react"
import { RefreshCcwIcon } from "lucide-react"

アバター

EmptyMedia コンポーネントを使用して、空の状態のアバターを表示します。

ユーザーはオフラインです

このユーザーは現在オフラインです。メッセージを残して通知するか、後でもう一度お試しください。

import {
  Avatar,
  AvatarFallback,

アバターグループ

EmptyMedia コンポーネントを使用して、アバターグループを空の状態で表示します。

CNLRER

チームメンバーがいません

このプロジェクトで共同作業するためにチームを招待しましょう。

import { PlusIcon } from "lucide-react"

import {

InputGroup

InputGroup コンポーネントを EmptyContent コンポーネントに追加できます。

404 - ページが見つかりません

お探しのページは存在しません。以下から必要な情報を検索してみてください。

/

お困りですか？サポートに問い合わせる

import { SearchIcon } from "lucide-react"

import {

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

لا توجد مشاريع بعد

لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.

تعرف على المزيد

"use client"

import * as React from "react"

API リファレンス

Empty

空の状態の主要コンポーネント。EmptyHeader コンポーネントと EmptyContent コンポーネントをラップします。

Prop	Type	Default
`className`	`string`

<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

EmptyHeader

EmptyHeader コンポーネントは、空のメディア、タイトル、および説明をラップします。

Prop	Type	Default
`className`	`string`

<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>

EmptyMedia

アイコンや画像などの空の状態のメディアを表示するには、EmptyMedia コンポーネントを使用します。これを使用して、アバターなどの他のコンポーネントを表示することもできます。

Prop	Type	Default
`variant`	`"default" \| "icon"`	`default`
`className`	`string`

<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>

<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

EmptyTitle コンポーネントを使用して、空の状態のタイトルを表示します。

Prop	Type	Default
`className`	`string`

<EmptyTitle>No data</EmptyTitle>

EmptyDescription

EmptyDescription コンポーネントを使用して、空の状態の説明を表示します。

Prop	Type	Default
`className`	`string`

<EmptyDescription>You do not have any notifications.</EmptyDescription>

EmptyContent

EmptyContent コンポーネントを使用して、ボタン、入力、リンクなどの空の状態のコンテンツを表示します。

Prop	Type	Default
`className`	`string`

<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>

Dropdown Menu Field

On This Page

インストール使い方構成アウトライン背景アバターアバターグループ InputGroup RTL API リファレンス Empty EmptyHeader EmptyMedia EmptyTitle EmptyDescription EmptyContent

shadcn/uiアプリをVercelにデプロイ

OpenAI、Sonos、Adobeなどに採用されています。

Vercelは、アプリや機能を大規模にデプロイするためのツールとインフラを提供します。