@neynar/ui/llm-docs/empty-state.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# EmptyState

**Type**: component

EmptyState - Displays empty or no-data states with consistent UX patterns A comprehensive component for handling empty states across applications. Provides a standardized way to communicate when content is unavailable, data is missing, or initial setup is required. Built with accessibility-first principles and follows established empty state design patterns to guide users toward resolution. **Common Use Cases:** - Search results with no matches - Empty lists, tables, or dashboards - Inbox or notification centers with no items - Data visualization with no data - Onboarding states for new users - Error recovery scenarios **Component Structure:** The component follows a top-down visual hierarchy: Icon → Title → Description → Action. All elements except the title are optional, allowing for flexible implementation across different contexts while maintaining visual consistency.

## JSX Usage

```jsx
import { EmptyState } from '@neynar/ui';

<EmptyState
  title="value"
  description="value"
  icon={value}
  action={() => {}}
  className="value"
>
  {/* Your content here */}
</EmptyState>
```

## Component Props

### title
- **Type**: `string`
- **Required**: Yes
- **Description**: No description available

### description
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### icon
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

### action
- **Type**: `{
    /**
     * Text label for the action button
     *
     * Should be specific and action-oriented rather than generic.
     * @example "Create your first post", "Import data", "Try again"
     */
    label: string;

    /**
     * Click handler function executed when the action button is pressed
     *
     * Called when the user activates the button via click or keyboard interaction.
     * Should handle the primary action to resolve the empty state.
     */
    onClick: () => void;
  }`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Minimal empty state with just title
<EmptyState title="No notifications" />
```
### Example 2
```tsx
// Search results empty state
import { Search } from 'lucide-react';
<EmptyState
  icon={<Search className="w-12 h-12" />}
  title="No results found"
  description="Try adjusting your search terms or filters"
  action={{
    label: "Clear filters",
    onClick: () => resetFilters()
  }}
/>
```
### Example 3
```tsx
// Inbox empty state with call-to-action
import { Inbox, Plus } from 'lucide-react';
<EmptyState
  icon={<Inbox className="w-16 h-16" />}
  title="Your inbox is empty"
  description="New messages and notifications will appear here"
  action={{
    label: "Compose message",
    onClick: () => openComposer()
  }}
/>
```
### Example 4
```tsx
// Data dashboard empty state with custom styling
import { BarChart3, TrendingUp } from 'lucide-react';
<EmptyState
  className="min-h-[400px] bg-gradient-to-br from-muted/20 to-muted/10 rounded-lg border border-dashed border-muted-foreground/20"
  icon={<BarChart3 className="w-14 h-14 opacity-60" />}
  title="No analytics data"
  description="Connect your data source or import historical data to view insights"
  action={{
    label: "Connect data source",
    onClick: () => showDataSourceModal()
  }}
/>
```
### Example 5
```tsx
// File manager empty state
import { FolderOpen, Upload } from 'lucide-react';
<EmptyState
  icon={<FolderOpen className="w-12 h-12" />}
  title="This folder is empty"
  description="Drag and drop files here or use the upload button"
  action={{
    label: "Upload files",
    onClick: () => triggerFileUpload()
  }}
/>
```
### Example 6
```tsx
// Error recovery empty state
import { AlertTriangle, RefreshCw } from 'lucide-react';
<EmptyState
  icon={<AlertTriangle className="w-12 h-12 text-destructive" />}
  title="Failed to load data"
  description="There was a problem loading your content. Please try again."
  action={{
    label: "Retry",
    onClick: () => refetchData()
  }}
/>
```
### Example 7
```tsx
// Team members empty state with multiple actions
import { Users, UserPlus, Mail } from 'lucide-react';
function TeamEmptyState() {
  return (
    <div className="space-y-4">
      <EmptyState
        icon={<Users className="w-16 h-16" />}
        title="No team members yet"
        description="Invite colleagues to collaborate on projects"
        action={{
          label: "Invite members",
          onClick: () => openInviteModal()
        }}
      />
      <div className="flex justify-center gap-2">
        <Button variant="outline" size="sm" onClick={() => importFromCsv()}>
          <Mail className="w-4 h-4 mr-2" />
          Import from CSV
        </Button>
      </div>
    </div>
  );
}
```