Dashed empty state with a skeleton-card illustration, copy and two actions.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/empty-state
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { Upload } from "lucide-react";4import { EmptyState } from "@/components/nextui/empty-state";56export function NoFiles() {7return (8<EmptyState9title="No files yet"10description="Upload a file or drag one here to get started."11actionLabel="Upload file"12actionIcon={Upload}13onAction={() => console.log("upload")}14secondaryActionLabel={null}15/>16);17}
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | "No projects yet" | Heading under the cards |
| description | ReactNode | "Create your first project to start inviting your team." | Supporting text |
| actionLabel | ReactNode | null | "New project" | Primary button label; null hides it |
| actionIcon | LucideIcon | Plus | Icon before the primary label |
| onAction | () => void | – | Called when the primary button is clicked |
| secondaryActionLabel | ReactNode | null | "Import" | Outline button label; null hides it |
| onSecondaryAction | () => void | – | Called when the outline button is clicked |
| className | string | – | Extra classes on the container |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.