juxt.ui

Feedback

Empty State

A placeholder for a list, table or panel with nothing in it yet: an icon, a title, a line of text and an optional action.

No messages yet

When someone replies, you'll see it here.
Copy
<script setup lang="ts">
import { Inbox } from '@lucide/vue'
</script>

<template>
  <JEmptyState title="No messages yet" description="When someone replies, you'll see it here.">
    <template #icon><Inbox /></template>
  </JEmptyState>
</template>

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

Copy
import { JEmptyState } from '@juxtui/ui'

Usage #

Copy
<JEmptyState title="No projects" description="Create a project to start tracking work.">
  <template #icon><FolderPlusIcon /></template>
  <template #actions>
    <JButton variant="primary" size="sm">New project</JButton>
  </template>
</JEmptyState>

The default slot overrides description when you need more than plain text, e.g. a list of next steps or a link.

size scales padding and the icon well together — pick it to match the space you have, not the amount of content.

Variants & examples #

With actions#

Up to a couple of buttons; more than that belongs in a menu.

No projects

Create a project to start tracking work.
Copy
<script setup lang="ts">
import { FolderPlus } from '@lucide/vue'
</script>

<template>
  <JEmptyState title="No projects" description="Create a project to start tracking work.">
    <template #icon><FolderPlus /></template>
    <template #actions>
      <JButton variant="primary" size="sm">New project</JButton>
      <JButton variant="ghost" size="sm">Import</JButton>
    </template>
  </JEmptyState>
</template>

Compact#

The sm size for a narrow panel or sidebar.

No results

Try a different search term.
Copy
<script setup lang="ts">
import { Search } from '@lucide/vue'
</script>

<template>
  <div class="flex flex-col items-stretch divide-y divide-border">
    <JEmptyState size="sm" title="No results" description="Try a different search term.">
      <template #icon><Search /></template>
    </JEmptyState>
  </div>
</template>

API #

Props

PropTypeDefault Description
titlestring—Heading.
descriptionstring—Supporting line under the title. Overridden by the default slot.
size'sm' | 'md' | 'lg''md'Padding and max width.

Slots

SlotProps Description
icon—Icon or illustration shown above the title.
default—Replaces description with custom content.
actions—Call to action, typically a JButton.

Accessibility #

  • The icon well is decorative; give it meaning through title, not the icon alone.
  • This is a static block, not a live region — if it replaces a loading state, announce that transition yourself.