Photonix

WelcomeBanner

A personalized greeting banner for dashboard headers.

Preview

Welcome back, Alex!

You have 3 pending tasks and 2 new messages today. Check your workspace to stay updated.

Illustration

Usage
import { WelcomeBanner } from '@photonix/ultimate';

<WelcomeBanner
  title="Welcome back, Alex!"
  description="Personalized greeting for your users."
  bg="brand-subtle"
/>

Component API

WelcomeBanner

Prop
Type
Default
Description
title
React.ReactNode
-
description
string
-
image
React.ReactNode
-
actions
React.ReactNode
-
loading
boolean
false
bg
string
'transparent'

Variants

Standard Welcome

Standard hero-style greeting with actions and image.

Ready to work?

You have 5 tasks to complete today.

Standard Welcome
<WelcomeBanner
  title="Ready to work?"
  description="You have 5 tasks to complete today."
  actions={<Button variant="primary">View Tasks</Button>}
/>

Loading State

Displays a skeleton preview while data is being fetched.

Loading State
<WelcomeBanner title="Hello" description="..." loading />

Minimal Version

Simple title and description without extra elements.

Good Morning!

It's a great day to manifest your dreams.

Minimal Version
<WelcomeBanner
  title="Good Morning!"
  description="It's a great day to manifest your dreams."
/>

On this page

Preview
Component API
Variants
Standard Welcome
Loading State
Minimal Version
Photonix UI - React Components, Templates & Figma Design System