---
status: "published"
label: "Empty State"
title: "Empty State Component in the Next.js Supabase SaaS kit"
description: "Learn how to use the Empty State component in the Next.js Supabase SaaS kit"
order: 7
---

The `EmptyState` component is a flexible and reusable UI element designed to display when there's no content to show. It's perfect for scenarios like empty lists, search results with no matches, or initial states of features.

{% component path="empty-state" /%}

## Components

1. `EmptyState`: The main wrapper component
2. `EmptyStateHeading`: For the main heading
3. `EmptyStateText`: For descriptive text
4. `EmptyStateButton`: For a call-to-action button

## Usage

```jsx
import { EmptyState, EmptyStateHeading, EmptyStateText, EmptyStateButton } from '@kit/ui/empty-state';

function MyComponent() {
  return (
    <EmptyState>
      <EmptyStateHeading>No results found</EmptyStateHeading>
      <EmptyStateText>Try adjusting your search or filter to find what you're looking for.</EmptyStateText>
      <EmptyStateButton>Clear filters</EmptyStateButton>
    </EmptyState>
  );
}
```

## Component Details

### EmptyState

The main container that wraps all other components.

- **Props**: Accepts all standard `div` props
- **Styling**:
- Flex container with centered content
- Rounded corners with a dashed border
- Light shadow for depth

### EmptyStateHeading

Used for the main heading of the empty state.

- **Props**: Accepts all standard `h3` props
- **Styling**:
- Large text (2xl)
- Bold font
- Tight letter spacing

### EmptyStateText

For descriptive text explaining the empty state or providing guidance.

- **Props**: Accepts all standard `p` props
- **Styling**:
- Small text
- Muted color for less emphasis

### EmptyStateButton

A button component for primary actions.

- **Props**: Accepts all props from the base `Button` component
- **Styling**:
- Margin top for spacing
- Inherits styles from the base `Button` component

## Features

1. **Flexible Structure**: Components can be used in any order, and additional custom elements can be added.
2. **Automatic Layout**: The component automatically arranges its children in a centered, vertical layout.
3. **Customizable**: Each subcomponent accepts className props for custom styling.
4. **Type-Safe**: Utilizes TypeScript for prop type checking.

## Customization

You can customize the appearance of each component by passing a `className` prop:

```tsx
<EmptyState className="bg-gray-100">
  <EmptyStateHeading className="text-primary">Custom Heading</EmptyStateHeading>
  <EmptyStateText className="text-lg">Larger descriptive text</EmptyStateText>
  <EmptyStateButton className="bg-secondary">Custom Button</EmptyStateButton>
</EmptyState>
```

This `EmptyState` component provides a clean, consistent way to handle empty states in your application. Its modular design allows for easy customization while maintaining a cohesive look and feel across different use cases.