DocsComponentsEmpty

Empty

An empty state, with media, title, description and actions.

6 files

<pb-ui.empty class="max-w-md border">
  <pb-ui.empty-header>
    <pb-ui.empty-media variant="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
    </pb-ui.empty-media>
    <pb-ui.empty-title>No projects yet</pb-ui.empty-title>
    <pb-ui.empty-description>You haven't created any projects yet. Get started by creating your first one.</pb-ui.empty-description>
  </pb-ui.empty-header>
  <pb-ui.empty-content>
    <div class="flex gap-2">
      <pb-ui.button>Create project</pb-ui.button>
      <pb-ui.button variant="outline">Import</pb-ui.button>
    </div>
  </pb-ui.empty-content>
</pb-ui.empty>

Installation

pyblade-ui add empty

Copy these files into your project

components/ui/empty.html

<div data-slot="empty" {{ attributes.cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12") }}>{{ slot }}</div>

components/ui/empty_header.html

<div data-slot="empty-header" {{ attributes.cn("flex max-w-sm flex-col items-center gap-2 text-center") }}>{{ slot }}</div>

components/ui/empty_media.html

@props({'variant': 'default'})
<div data-slot="empty-media" data-variant="{{ variant }}" {{ attributes.cn(
    "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
    {'default': 'bg-transparent', 'icon': "size-10 rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"}[variant],
) }}>{{ slot }}</div>

components/ui/empty_title.html

<div data-slot="empty-title" {{ attributes.cn("text-lg font-medium tracking-tight") }}>{{ slot }}</div>

components/ui/empty_description.html

<p data-slot="empty-description" {{ attributes.cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary") }}>{{ slot }}</p>

components/ui/empty_content.html

<div data-slot="empty-content" {{ attributes.cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance") }}>{{ slot }}</div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.empty> <pb-ui.empty-header> <pb-ui.empty-media> <pb-ui.empty-title> <pb-ui.empty-description> <pb-ui.empty-content> are available in all your templates.

<pb-ui.empty class="border">
  <pb-ui.empty-header>
    <pb-ui.empty-title>No projects yet</pb-ui.empty-title>
    <pb-ui.empty-description>Create your first project to get started.</pb-ui.empty-description>
  </pb-ui.empty-header>
  <pb-ui.empty-content><pb-ui.button>Create project</pb-ui.button></pb-ui.empty-content>
</pb-ui.empty>

Props

Prop	Default
variant	'default'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Alert Kbd ›