empty

Empty

Fills the space when there is nothing to show, such as an empty cart or a search without results, with an icon, a title, a hint and actions.

States: Default

Parts

Part	File	Does
Empty	Empty.vue	Groups all parts of the empty state.
EmptyContent	EmptyContent.vue	Holds the actions offered to the user when there is nothing to show.
EmptyDescription	EmptyDescription.vue	Explains why there is nothing to show and what to do next.
EmptyHeader	EmptyHeader.vue	Groups the media, title and description of the empty state.
EmptyMedia	EmptyMedia.vue	Shows an icon or image above the title of the empty state.
EmptyTitle	EmptyTitle.vue	States that there is nothing to show.

Anatomy

<Empty>
  <EmptyHeader>
    <EmptyMedia />
    <EmptyTitle />
    <EmptyDescription />
  </EmptyHeader>
  <EmptyContent />
</Empty>

Styling

Part	Recipe
Empty	empty
EmptyContent	empty-content
EmptyDescription	empty-description
EmptyHeader	empty-header
EmptyMedia	empty-media
EmptyTitle	empty-title

Install

Writes 7 files into components/ui/empty/. For agents, npx @frontic/ui docs empty prints this reference as markdown; the MCP server serves the same.

npm packages: class-variance-authority; reka-ui

API reference

Empty Empty.vue

Groups all parts of the empty state. Renders a <div>.

Prop	Type	Default
asChild	boolean	false

as	AsTag \| Component	'div'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'div'
class	ClassValue	—

Recipe empty	Sets
base: empty	12 properties

Parts

Anatomy

Styling

Install

API reference

Empty Empty.vue

EmptyContent EmptyContent.vue

EmptyDescription EmptyDescription.vue

EmptyHeader EmptyHeader.vue

EmptyMedia EmptyMedia.vue

EmptyTitle EmptyTitle.vue