7ebff31475
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
95 lines
2.9 KiB
Plaintext
95 lines
2.9 KiB
Plaintext
---
|
|
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. |