# Empty State
Informational placeholder for no-data and first-run flows.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { EmptyState } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/empty-state
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=grid-empty-spinner--empty-state--default&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="380" title="Empty State component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<EmptyState title="No assets" description="Import your first file" />
```

## Props

<PropsTable
  props={[
  {
    name: "icon",
    type: "React.ReactNode",
    description: "Optional decorative icon.",
  },
  {
    name: "title",
    type: "string",
    description: "Primary headline text.",
  },
  {
    name: "description",
    type: "string",
    description: "Supporting description text.",
  },
  {
    name: "action",
    type: "React.ReactNode",
    description: "Optional recovery action (button or link).",
  },
  {
    name: "variant",
    type: '"default" | "compact"',
    default: '"default"',
    description: "Layout style.",
  },
]}
/>