Recipes · UX

Empty states

First-run and zero-data screens are your onboarding. Treat them like a landing page in miniature.

Preview

An empty inbox with an illustration slot, headline, sub, and a single primary action.

No messages yet

When someone sends you a message, it will show up here.

Source

tsx

import { Button, Card } from "@novix-ui/react";
import { Inbox, Plus } from "lucide-react";
 
export function EmptyInbox() {
  return (
    <Card className="max-w-md p-8 text-center">
      <div className="mx-auto flex size-12 items-center justify-center rounded-2xl bg-accent/10 text-accent">
        <Inbox className="size-6" />
      </div>
      <h3 className="mt-4 font-semibold">No messages yet</h3>
      <p className="mt-1 text-sm text-muted-foreground">
        When someone sends you a message, it will show up here.
      </p>
      <Button className="mt-5" leadingIcon={<Plus className="size-4" />}>New message</Button>
    </Card>
  );
}

Anatomy

Icon or illustration — one visual anchor. Use a tinted square with an Icon at 24px.
Headline — a single sentence that names the emptiness.
Sub-copy — one line explaining what happens next.
Primary action — never more than one. Secondary belongs as a link below.