Empty state

The starting point

Count the problems.

Layer 1: Copywriting

Fix the heading

Before: "No data yet" After: "Your first deploy is five minutes away"

Fix the helper text

Before: "There is currently no data to display. Please add some data to get started with the dashboard." After: "Connect a repository and push a commit. Your build logs, deploy previews, and uptime metrics will appear here automatically."

Fix the CTA

Before: "Get Started" After: "Connect your first repository"

Layer 2: Typography

Heading scale

text-lg is too small for the space it occupies. The heading needs to command the entire content area:

Body typography

Layer 3: Craft

Vertical centring

Illustration accessibility

CTA as a link

Layer 4: Animation

Stagger entrance

Reduced motion

When initial is false, the element renders immediately.