Introduction

The Welcome component can clearly communicate to users the scope of achievable intentions and expected functionality. Using appropriate welcome recommendation components can effectively reduce user learning costs and help users quickly understand and get started smoothly.

Code Examples

Basic Usage

Welcome to Element Plus X 🦋

Welcome to Element Plus X 💖

This is description information ~

Welcome to Element Plus X 💖

This is description information ~

Welcome to Element Plus X 💖

Subtitle

This is description information ~

Basic Usage

Quickly create a welcome card

<script setup lang="ts"></script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Welcome title="Welcome to Element Plus X 🦋" />

    <Welcome
      title="Welcome to Element Plus X 💖"
      description="This is description information ~"
    />

    <Welcome
      icon="/logo.png"
      title="Welcome to Element Plus X 💖"
      description="This is description information ~"
    />

    <Welcome
      icon="/logo.png"
      title="Welcome to Element Plus X 💖"
      extra="Subtitle"
      description="This is description information ~"
    />
  </div>
</template>

<style scoped lang="less"></style>

Style Variants

Welcome to Element Plus X 🦋

Welcome to Element Plus X 💖

This is description information ~

Welcome to Element Plus X 💖

This is description information ~

Welcome to Element Plus X 💖

Subtitle

This is description information ~

variant Property

Quickly switch between multiple styles, currently only two: filled and borderless. Default is filled.

<script setup lang="ts"></script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Welcome title="Welcome to Element Plus X 🦋" />

    <Welcome
      title="Welcome to Element Plus X 💖"
      description="This is description information ~"
    />

    <Welcome
      icon="/logo.png"
      title="Welcome to Element Plus X 💖"
      description="This is description information ~"
    />

    <Welcome
      icon="/logo.png"
      variant="borderless"
      title="Welcome to Element Plus X 💖"
      extra="Subtitle"
      description="This is description information ~"
    />
  </div>
</template>

<style scoped lang="less"></style>

Background Color

Switch layout:

Welcome to Element Plus X 🦋

Welcome to Element Plus X 💖

This is description information ~

Welcome to Element Plus X 💖

This is description information ~

Welcome to Element Plus X 💖

Subtitle

This is description information ~

Welcome to Element Plus X 🦋

Welcome to Element Plus X 💖

This is description information ~

Welcome to Element Plus X 💖

This is description information ~

Welcome to Element Plus X 💖

Subtitle

This is description information ~

direction Property

Set layout method ltr from left to right and rtl from right to left, more properties to control styles, see property list for details.

<script setup lang="ts">
import type { WelcomeProps } from 'vue-element-plus-x/types/Welcome';
import { Refresh } from '@element-plus/icons-vue';

const bgColor = ref(
  'linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)'
);
const value = ref<WelcomeProps['direction']>('ltr');

// Generate random gradient colors
function generateGradientColor(): string {
  const randomBrightColor = () => {
    // To ensure colors are bright tones, set the range to 128 - 255
    const r = Math.floor(Math.random() * 128) + 128;
    const g = Math.floor(Math.random() * 128) + 128;
    const b = Math.floor(Math.random() * 128) + 128;
    return `rgba(${r}, ${g}, ${b}, 0.2)`;
  };

  const color1 = randomBrightColor();
  const color2 = randomBrightColor();
  const color3 = randomBrightColor();

  return `linear-gradient(to bottom right, ${color1}, ${color2}, ${color3})`;
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex; gap: 12px; align-items: center">
      <el-button
        type="warning"
        style="width: fit-content"
        @click="bgColor = generateGradientColor()"
      >
        Set your favorite background color <el-icon><Refresh /></el-icon>
      </el-button>

      <span>Switch layout: </span>
      <el-switch v-model="value" active-value="ltr" inactive-value="rtl" />
    </div>

    <Welcome
      :direction="value"
      title="Welcome to Element Plus X 🦋"
      :style="{ background: bgColor }"
    />

    <Welcome
      :direction="value"
      title="Welcome to Element Plus X 💖"
      description="This is description information ~"
      :style="{ background: bgColor }"
    />

    <Welcome
      :direction="value"
      icon="/logo.png"
      title="Welcome to Element Plus X 💖"
      description="This is description information ~"
      :style="{ background: bgColor }"
    />

    <Welcome
      :direction="value"
      icon="/logo.png"
      title="Welcome to Element Plus X 💖"
      extra="Subtitle"
      description="This is description information ~"
      :style="{ background: bgColor }"
    />

    <Welcome
      :direction="value"
      variant="borderless"
      title="Welcome to Element Plus X 🦋"
      :style="{ background: bgColor }"
    />

    <Welcome
      :direction="value"
      variant="borderless"
      title="Welcome to Element Plus X 💖"
      description="This is description information ~"
      :style="{ background: bgColor }"
    />

    <Welcome
      :direction="value"
      icon="/logo.png"
      variant="borderless"
      title="Welcome to Element Plus X 💖"
      description="This is description information ~"
      :style="{ background: bgColor }"
    />

    <Welcome
      :direction="value"
      icon="/logo.png"
      variant="borderless"
      title="Welcome to Element Plus X 💖"
      extra="Subtitle"
      description="This is description information ~"
      :style="{ background: bgColor }"
    />
  </div>
</template>

<style scoped lang="less"></style>

Custom Image

Welcome to Element Plus X 💖

A Vue 3 recreation of ant-design-x. Later will integrate AI workflow orchestration components and multi-functional md rendering components, providing the Vue development community with a useful AI component library

image Slot

Convenient to replace custom images

<script setup lang="ts">
const bgColor =
  'linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)';
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Welcome
      variant="borderless"
      :style="{ background: bgColor }"
      title="Welcome to Element Plus X 💖"
      description="A Vue 3 recreation of ant-design-x. Later will integrate AI workflow orchestration components and multi-functional md rendering components, providing the Vue development community with a useful AI component library"
    >
      <template #image>
        <img src="/logo.png" style="width: 80px" />
      </template>
    </Welcome>
  </div>
</template>

<style scoped lang="less"></style>

Custom Subtitle

Welcome to Element Plus X 💖

A Vue 3 recreation of ant-design-x. Later will integrate AI workflow orchestration components and multi-functional md rendering components, providing the Vue development community with a useful AI component library

extra Slot

Convenient to define custom subtitle content

<script setup lang="ts">
const bgColor =
  'linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)';
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Welcome
      direction="rtl"
      icon="/logo.png"
      variant="borderless"
      :style="{ background: bgColor }"
      title="Welcome to Element Plus X 💖"
      description="A Vue 3 recreation of ant-design-x. Later will integrate AI workflow orchestration components and multi-functional md rendering components, providing the Vue development community with a useful AI component library"
    >
      <template #extra>
        <el-button link type="primary"> About Me </el-button>
      </template>
    </Welcome>
  </div>
</template>

<style scoped lang="less"></style>

Theme Overrides (themeOverrides)

Override Welcome theme tokens via ConfigProvider.themeOverrides. See the full token list and template:

• Theme Tokens
• /theme-overrides.template.ts

Toggle the overrides to see the effect.

Welcome to Element Plus X

Toggle to see spacing, radius, border and card-like feel changes.

Theme Overrides (themeOverrides)

Override Welcome --elx-* variables via ConfigProvider.themeOverrides and see changes instantly.

<script setup lang="ts">
import { computed, ref } from 'vue';

const enabled = ref(true);

const themeOverrides = computed(() => {
  if (!enabled.value) return {};
  return {
    common: {
      'color-primary': '#7c3aed',
      'border-color': 'rgba(124, 58, 237, 0.32)',
      'box-shadow': '0 18px 54px rgba(124, 58, 237, 0.22)'
    },
    components: {
      Welcome: {
        'welcome-filled-bg': 'rgba(255, 255, 255, 0.9)',
        'welcome-filled-border': 'rgba(124, 58, 237, 0.45)',
        'welcome-title-color': 'rgba(15, 23, 42, 0.92)',
        'welcome-description-color': 'rgba(15, 23, 42, 0.72)',
        'welcome-border-radius': '16px',
        'welcome-padding': '28px',
        'welcome-gap': '18px',
        'welcome-icon-size': '72px'
      }
    }
  };
});
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <div>Toggle the overrides to see the effect.</div>
      <button
        type="button"
        style="
          padding: 6px 10px;
          border-radius: 8px;
          border: 1px solid rgba(0, 0, 0, 0.12);
          background: rgba(0, 0, 0, 0.02);
          cursor: pointer;
        "
        @click="enabled = !enabled"
      >
        {{ enabled ? 'Disable theme overrides' : 'Enable theme overrides' }}
      </button>
    </div>

    <ConfigProvider apply-to="self" :theme-overrides="themeOverrides">
      <div
        style="
          padding: 14px;
          border-radius: 18px;
          border: 1px solid var(--elx-border-color);
          background:
            radial-gradient(
              1200px 260px at 0% 0%,
              rgba(124, 58, 237, 0.2),
              transparent 60%
            ),
            radial-gradient(
              900px 240px at 100% 20%,
              rgba(59, 130, 246, 0.14),
              transparent 55%
            ),
            rgba(0, 0, 0, 0.02);
          box-shadow: var(--elx-box-shadow);
        "
      >
        <Welcome
          title="Welcome to Element Plus X"
          description="Toggle to see spacing, radius, border and card-like feel changes."
          variant="filled"
        />
      </div>
    </ConfigProvider>
  </div>
</template>

Properties

Property Name	Type	Required	Default	Description
variant	string	No	filled	Component style variant (filled/borderless)
direction	string	No	ltr	Text direction (ltr/rtl)
icon	string	No	-	Icon URL address
title	string	No	-	Main title text content
extra	string	No	-	Subtitle text content
description	string	No	-	Description text content
className	string	No	-	Custom class name for outer container
rootClassName	string	No	-	Custom class name for root node
classNames	object	No	-	Custom class names for each part ({ icon, title, extra, description })
style	object	No	-	Custom styles for outer container
styles	object	No	-	Custom styles for each part ({ icon, title, extra, description })
prefixCls	string	No	welcome	Component class name prefix

Slots

Slot Name	Parameters	Type	Description
#image	-	Slot	Custom welcome image content
#extra	-	Slot	Custom subtitle content

Features

1. Currently supports filled (filled) and borderless (borderless) two visual styles through the variant property
2. Supports direction property to control text direction
3. Can control styles through classNames and styles with fine granularity
4. Supports image and extra slots to extend custom content