Empty

The Empty component is a flexible compound component system for displaying empty states in your application. It provides a structured layout for icons, titles, descriptions, and action buttons when there is no content to show. The component supports multiple layouts, padding options, and media variants for a polished empty state experience.

Preview

Installation

npx novaui-cli add empty

Import

import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from 'novaui-components'

Basic Usage

Compose the compound components to build an empty state:

import { Empty, EmptyHeader, EmptyTitle, EmptyDescription } from 'novaui-components'

export function BasicEmpty() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyTitle>No items yet</EmptyTitle>
        <EmptyDescription>Get started by creating your first item.</EmptyDescription>
      </EmptyHeader>
    </Empty>
  )
}

Layout

Screen Layout

The default layout centers content in the available space, ideal for full-screen empty states:

<Empty layout="screen">
  <EmptyHeader>
    <EmptyTitle>Nothing here</EmptyTitle>
    <EmptyDescription>This page is empty. Add some content to get started.</EmptyDescription>
  </EmptyHeader>
</Empty>

Inline Layout

For embedding empty states within sections or cards:

<Empty layout="inline">
  <EmptyHeader>
    <EmptyTitle>No messages</EmptyTitle>
    <EmptyDescription>Your inbox is empty.</EmptyDescription>
  </EmptyHeader>
</Empty>

Media Variants

Default Media

A simple icon container with no background:

import { Languages } from 'lucide-react-native'

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="default">
      <Languages className="text-muted-foreground" />
    </EmptyMedia>
    <EmptyTitle>No translations</EmptyTitle>
    <EmptyDescription>Add your first translation to get started.</EmptyDescription>
  </EmptyHeader>
</Empty>

Icon Media

A styled container with background, border, and decorative shadow cards:

import { FileText } from 'lucide-react-native'

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FileText />
    </EmptyMedia>
    <EmptyTitle>No documents</EmptyTitle>
    <EmptyDescription>Upload your first document to get started.</EmptyDescription>
  </EmptyHeader>
</Empty>

With Actions

Add action buttons using EmptyContent:

import { Button } from 'novaui-components'

<Empty>
  <EmptyHeader>
    <EmptyTitle>No projects</EmptyTitle>
    <EmptyDescription>Create your first project to organize your work.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button label="Create Project" />
    <Button variant="ghost" label="Browse Templates" />
  </EmptyContent>
</Empty>

Padding

Control the internal spacing with the padding prop:

<Empty padding="none">...</Empty>  {/* No padding */}
<Empty padding="sm">...</Empty>    {/* px-4 py-4 */}
<Empty padding="md">...</Empty>    {/* px-6 py-6 (default) */}
<Empty padding="lg">...</Empty>    {/* px-6 py-10 */}

Props API

EmptyProps

Extends React.ComponentPropsWithoutRef<typeof View> and includes:

EmptyHeaderProps

EmptyMediaProps

EmptyTitleProps

Extends React.ComponentPropsWithoutRef<typeof Text>. Applies text-center text-xl font-semibold leading-tight text-foreground classes.

EmptyDescriptionProps

Extends React.ComponentPropsWithoutRef<typeof Text>. Applies text-center text-sm leading-relaxed text-muted-foreground max-w-xs classes.

EmptyContentProps

Extends React.ComponentPropsWithoutRef<typeof View>. Applies w-full min-w-0 max-w-sm flex-col items-center gap-3 mt-2 classes.

Best Practices

1. Be helpful: Always provide actionable guidance — tell users what they can do to resolve the empty state.

2. Use icons: Add an icon that relates to the content type for faster visual recognition.

3. Keep it concise: Titles should be short and descriptions should be one or two sentences at most.

4. Provide actions: Include primary and secondary actions to guide users forward.

5. Choose the right layout: Use screen for full-page empty states and inline for sections within a page.

Related Components

• Use Button inside EmptyContent for call-to-action buttons
• Combine with Spinner for loading-to-empty transitions
• Pair with conditional rendering to swap between content and empty states