Empty

kai-empty

A centred empty-state block with a media slot, a title, a description, and a content slot for actions — keeps layouts grounded instead of leaving users with a blank screen.

• Shadow DOM
• 2 props
• Media slot
• Actions slot
• Works in any framework

Preview

When to use

Place <kai-empty> where content would normally appear — a conversation list, search results panel, file explorer — whenever that area is empty. Give the element or its parent an explicit height so vertical centering renders correctly. Project a contextual icon into slot="media" and a CTA into the default slot.

Usage

<kai-empty
  empty-title="No conversations yet"
  description="Start a new chat to see it appear here."
>
  <svg slot="media" width="28" height="28" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2">
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
  </svg>
  <button>New chat</button>
</kai-empty>

• empty-title — use this attribute, not title (which is a reserved HTML attribute).
• Slots live in the light DOM — style them with your page CSS, not shadow styles.
• Height — the element uses flexbox to vertically centre content; its parent needs an explicit height (e.g. height: 100% or flex: 1).

Examples

Conversation List Placeholder

Code

Search with No Results

Code

Title Only

Omitting the description gives a minimal, uncluttered treatment.

Code

Props

Property	Type	Default	Notes
emptyTitle	string	''	Title text. Attribute: `empty-title` (`title` is a global HTML attribute).
description	string	''	Description text.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

EmptyEmptyHeaderEmptyMediaEmptyTitleEmptyDescriptionEmptyContent

---

Need a hand? Report a bug Ask for help