Empty State

Displays a placeholder with an icon, title, description, and optional action.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { Button, EmptyState } from "@aile.sh/elia";

export function Example() {
  return (
    <EmptyState
      icon={
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M20 6H10L8 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Z" />
        </svg>
      }
      title="No projects yet"
      description="Create a project to get started"
      action={
        <Button variant="secondary" size="sm">
          New project
        </Button>
      }
    />
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia