Empty State Component in the Next.js Supabase SaaS kit

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.

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

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:

<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.