Empty
A component to display an empty state.
Usage
No projects found
It looks like you haven't added any projects. Create one to get started.
Title
Use the title prop to set the title of the empty state.
No projects found
<template>
<PEmpty title="No projects found" />
</template>
Description
Use the description prop to set the description of the empty state.
No projects found
It looks like you haven't added any projects. Create one to get started.
<template>
<PEmpty
title="No projects found"
description="It looks like you haven't added any projects. Create one to get started."
/>
</template>
Icon
Use the icon prop to set the icon of the empty state.
No projects found
It looks like you haven't added any projects. Create one to get started.
<template>
<PEmpty
icon="i-lucide:file"
title="No projects found"
description="It looks like you haven't added any projects. Create one to get started."
/>
</template>
Avatar
Use the avatar prop to set the avatar of the empty state.
No projects found
It looks like you haven't added any projects. Create one to get started.
<template>
<PEmpty
:avatar="{
src: 'https://github.com/nuxt.png'
}"
title="No projects found"
description="It looks like you haven't added any projects. Create one to get started."
/>
</template>
Actions
Use the actions prop to add some Button actions to the empty state.
No projects found
It looks like you haven't added any projects. Create one to get started.
<template>
<PEmpty
icon="i-lucide:file"
title="No projects found"
description="It looks like you haven't added any projects. Create one to get started."
:actions="[
{
icon: 'i-lucide:plus',
label: 'Create new'
},
{
icon: 'i-lucide:refresh-cw',
label: 'Refresh',
color: 'neutral',
variant: 'subtle'
}
]"
/>
</template>
Variant
Use the variant prop to change the variant of the empty state.
No notifications
You're all caught up. New notifications will appear here.
<template>
<PEmpty
variant="naked"
icon="i-lucide:bell"
title="No notifications"
description="You're all caught up. New notifications will appear here."
:actions="[
{
icon: 'i-lucide:refresh-cw',
label: 'Refresh',
color: 'neutral',
variant: 'subtle'
}
]"
/>
</template>
Size
Use the size prop to change the size of the empty state.
No notifications
You're all caught up. New notifications will appear here.
<template>
<PEmpty
size="xl"
icon="i-lucide:bell"
title="No notifications"
description="You're all caught up. New notifications will appear here."
:actions="[
{
icon: 'i-lucide:refresh-cw',
label: 'Refresh',
color: 'neutral',
variant: 'subtle'
}
]"
/>
</template>
Examples
With slots
Use the available slots to create a more complex empty state.
<script setup lang="ts">
import type { PUserProps } from 'pohon-ui';
const members: Array<PUserProps> = [
{
name: 'Daniel Roe',
description: 'danielroe',
to: 'https://github.com/danielroe',
target: '_blank',
avatar: {
src: 'https://github.com/danielroe.png',
alt: 'danielroe',
},
},
{
name: 'Pooya Parsa',
description: 'pi0',
to: 'https://github.com/pi0',
target: '_blank',
avatar: {
src: 'https://github.com/pi0.png',
alt: 'pi0',
},
},
{
name: 'Sébastien Chopin',
description: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
alt: 'atinux',
},
},
{
name: 'praburangki',
description: 'praburangki',
to: 'https://github.com/praburangki',
target: '_blank',
avatar: {
src: 'https://github.com/praburangki.png',
alt: 'praburangki',
},
},
];
</script>
<template>
<PEmpty
title="No team members"
description="Invite your team to collaborate on this project."
variant="naked"
:actions="[{
label: 'Invite members',
icon: 'i-lucide:user-plus',
color: 'neutral',
}]"
>
<template #leading>
<PAvatarGroup size="xl">
<PAvatar
src="https://github.com/nuxt.png"
alt="Nuxt"
/>
<PAvatar
src="https://github.com/unjs.png"
alt="Unjs"
/>
</PAvatarGroup>
</template>
<template #footer>
<PSeparator class="my-4" />
<div class="gap-4 grid grid-cols-2">
<div
v-for="(member, index) in members"
:key="index"
class="rounded-lg bg-background flex ring ring-ring transition relative hover:bg-background-elevated/50 has-focus-visible:(ring-2 ring-primary)"
>
<div class="p-4 flex flex-1 flex-col gap-x-8 gap-y-4 relative sm:p-4 lg:grid">
<PUser
:avatar="member.avatar"
:name="member.name"
:description="member.description"
:pohon="{ name: 'truncate' }"
/>
</div>
<a
:href="member.to"
rel="noopener"
aria-label="Card link"
class="peer focus:outline-none"
:target="member.target"
><span
class="inset-0 absolute"
aria-hidden="true"
/></a>
</div>
</div>
</template>
</PEmpty>
</template>
API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Theme
We use unocss-variants to customize the theme. Read more about it in the theming guide.
Below is the theme configuration skeleton for the PEmpty. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
app.config.ts
export default defineAppConfig({
pohon: {
empty: {
slots: {
root: '',
header: '',
avatar: '',
title: '',
description: '',
body: '',
actions: '',
footer: ''
},
variants: {
size: {
xs: {
avatar: '',
title: '',
description: ''
},
sm: {
avatar: '',
title: '',
description: ''
},
md: {
avatar: '',
title: '',
description: ''
},
lg: {
avatar: '',
title: '',
description: ''
},
xl: {
avatar: '',
title: '',
description: ''
}
},
variant: {
solid: {
root: '',
title: '',
description: ''
},
outline: {
root: '',
description: ''
},
soft: {
root: '',
description: ''
},
subtle: {
root: '',
description: ''
},
naked: {
description: ''
}
}
},
defaultVariants: {
variant: 'outline',
size: 'md'
}
}
}
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
empty: {
slots: {
root: '',
header: '',
avatar: '',
title: '',
description: '',
body: '',
actions: '',
footer: ''
},
variants: {
size: {
xs: {
avatar: '',
title: '',
description: ''
},
sm: {
avatar: '',
title: '',
description: ''
},
md: {
avatar: '',
title: '',
description: ''
},
lg: {
avatar: '',
title: '',
description: ''
},
xl: {
avatar: '',
title: '',
description: ''
}
},
variant: {
solid: {
root: '',
title: '',
description: ''
},
outline: {
root: '',
description: ''
},
soft: {
root: '',
description: ''
},
subtle: {
root: '',
description: ''
},
naked: {
description: ''
}
}
},
defaultVariants: {
variant: 'outline',
size: 'md'
}
}
}
};
Changelog
No recent changes