Empty State with AI Suggestions — Free HTML CSS JS Snippet

The default empty state — a faint illustration, a line of grey text like "No items yet," and a single "Add your first item" button — has been the industry standard for over a decade, and it has a real cost: it hands the user a blank page and asks them to invent their own first move. For a brand-new user who doesn't yet know what belongs in your task list, project board, or inbox, that blank page is often where onboarding quietly fails. This snippet replaces the generic empty state with an AI-native empty state: instead of one vague call to action, it shows three concrete, contextually relevant starter items the user can add with a single click, alongside — not instead of — the standard manual input.

Why generic empty states underperform

A blank empty state assumes the user already knows what they want to create, which is precisely the assumption that's false for anyone encountering the feature for the first time. Product analytics teams have repeatedly found that empty states with zero suggested content have measurably lower "time to first action" completion than states offering pre-filled or one-click options — the cognitive cost of generating an example from nothing is higher than most designers assume, especially for less experienced or less confident users. The fix isn't a better illustration; it's giving the user something concrete to react to, even if they end up editing or ignoring it entirely.

Suggestions as a genuine on-ramp, not a gimmick

Each suggestion in this panel — "Follow up with client about proposal," "Review Q3 budget before Friday," "Plan team offsite for next quarter" — is written as a plausible, specific example of the kind of item that belongs in a task list, not a placeholder like "Example Task 1." This specificity matters: vague suggestions read as filler and get ignored, while concrete, contextual suggestions do double duty as both a fast one-click action *and* an implicit tutorial on what the feature is for. A production version of this pattern would source suggestions from a real signal — recently mentioned action items in connected email or chat threads, patterns from similar users' first sessions, or an LLM prompt fed the user's recent activity — which is why each item carries a small .ai-tag badge reading "Suggested" with a sparkle icon, honestly signaling that this content was generated or inferred, not manually curated by the product team. That transparency is itself a 2026 UX expectation: as more interface content is AI-assisted, labeling it clearly (rather than presenting it as if a human wrote it) is what keeps AI-native UI trustworthy rather than deceptive.

Interaction: one-click add with a soft dismissal

Clicking "+ Add" on a suggestion calls addTask(), which prepends a new item to #task-list with a short taskIn slide-fade entrance, then the source suggestion card animates out via a .added class that combines opacity: 0 and a subtle translateX before the node is removed on transitionend — never an abrupt disappearance. This gives the user clear before/after feedback: the suggestion visibly becomes a real task rather than silently vanishing.

The manual path is never removed

Critically, the suggestions sit *above* a labeled divider ("or create your own") and a fully functional text input — the AI suggestions augment the empty state, they don't replace user agency. A user who already knows exactly what they want to add can ignore the suggestions entirely and type their own item via the standard #create-form, which calls the identical addTask() function. This is the core design principle behind good AI-assisted UI: AI suggestions should lower the floor for uncertain users without raising the ceiling or removing control for confident ones. An empty state that *only* offered AI suggestions, with no manual escape hatch, would be a regression, not an improvement — this pattern keeps both paths first-class.

Applicability beyond task lists

The same shape — a short, honestly-labeled AI-suggested list plus a manual fallback — generalizes cleanly to search-with-no-results ("Did you mean...", trending queries), empty inbox/CRM states (suggested contacts to add), or empty dashboard widgets (suggested metrics to track), making this one of the more broadly reusable empty-state patterns for any AI-assisted 2026 product surface.