EmptyState

The message a page or section shows when it has no data yet, with an optional action.

Create a repository

Connect a repository to start scanning it for vulnerabilities.

1<template>2  <EmptyState3    icon="i-lucide-folder-plus"4    title="Create a repository"5    description="Connect a repository to start scanning it for vulnerabilities."6  >7    <template #action>8      <Button variant="primary">Connect repository</Button>9    </template>10  </EmptyState>11</template>

Props

Name	Type	Default
icon	string	-
title	string	-
description	string	-

Slots

Name	Description
title	Escape hatch: replaces the `title` prop's plain text.
description	Escape hatch: replaces the `description` prop's plain text.
action	Optional primary call-to-action, e.g. a single <Button>. Only one - this isn't an actions row.

Guidelines

Do

Use it for a presentational, feature-education empty state - a page or section with genuinely no data yet, where the goal is to get the user to create the first one.
Write title as an active instruction ("Create a repository", "Connect an integration"), not a passive status.
Pass the action slot a single primary <Button> when there's a clear next step.

Don't

Don't use it for a table's zero-results state - use TableEmptyRow instead (via Table's own emptyTitle/emptyDescription props); this component's icon+centered layout is for a page/section owning its own space, not a row inside an existing table.
Don't write a passive title like "No repositories found" - that reads as a dead end, not an invitation.
Don't put more than one action in the action slot - this isn't an actions row.

Don't add your own min-h-*/page-centering wrapper around it - that's the caller's layout concern, not something this component should assume.