Menu
Documentation
v4.0.0-beta.4

Placeholder

<BasePlaceholderPage /> · A placeholder component, for empty states.

View SourceOpen Issue
placeholder-image

Looks like you are new!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges.

vue
<template>
  <BasePlaceholderPage
    title="Looks like you are new!"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges."
  >
    <template #image>
      <img class="dark:invert" src="/img/vector/placeholders/placeholder-1.svg" alt="placeholder-image">
    </template>

    <div class="mt-2 flex justify-center gap-2">
      <BaseButton variant="primary" rounded="md" class="w-40">
        Take some action
      </BaseButton>
    </div>
  </BasePlaceholderPage>
</template>

Features

  • Ideal for empty states
  • Provides multiple slots
  • Supports media elements

Anatomy

This component accepts any content as a child. You can customize the component visual style by using the available props.

vue
<template>
  <BasePlaceholderPage>
    <template #image>
      <!-- Media goes here -->
    </template>
    <template #default>
      <!-- Content goes here -->
    </template>
  </BasePlaceholderPage>
</template>

API Reference

This component has props that you can use to modify its visual style.

Prop Type
title
default:-
string

The title of the placeholder.

subtitle
default:-
string

The subtitle of the placeholder.

image-size
default:"xs"
"md" | "xs" | "sm" | "lg" | "xl"

The size of the featured image.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Slot Type
#default
any
#image
any

Examples

Image size

Use the image-size prop to control the width of the image slot.

placeholder-image

Starting Soon!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges.

vue
<template>
  <BasePlaceholderPage
    title="Starting Soon!"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges."
  >
    <template #image>
      <img
        img-size="md"
        src="/img/illustrations/vector/placeholder-1.svg"
        alt="placeholder-image"
      >
    </template>

    <div class="mt-2 flex justify-center gap-2">
      <BaseButton rounded="md" class="w-32">
        Cancel
      </BaseButton>
      <BaseButton variant="primary" rounded="md" class="w-32">
        Confirm
      </BaseButton>
    </div>
  </BasePlaceholderPage>
</template>

Slot #default

Use the #default slot to add anything to your placeholder.

placeholder-image

Get Notified

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges.

vue
<template>
  <BasePlaceholderPage
    title="Get Notified"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges."
  >
    <template #image>
      <img
        src="/img/vector/placeholders/placeholder-3.svg"
        alt="placeholder-image"
      >
    </template>

    <div class="mt-2 flex justify-center gap-2">
      <BaseInput
        rounded="md"
        placeholder="Enter your email"
      />
      <BaseButton variant="primary" rounded="md">
        Subscribe
      </BaseButton>
    </div>
  </BasePlaceholderPage>
</template>

Paragraph

Placeload