Photonix

WelcomeBanner

A personalized greeting banner for dashboard headers.

Preview

Good morning, Jane

You have 8 project updates and 3 reviews waiting.

8 updates3 reviews
Usage
"use client";

import { Badge, Button, Flex, WelcomeBanner } from '@photonix/ultimate';

export default function WelcomeBannerBasicExample() {
    return (
        <WelcomeBanner
            title="Good morning, Jane"
            description="You have 8 project updates and 3 reviews waiting."
            actions={<Button variant="primary">Open inbox</Button>}
            image={(
                <Flex gap="xs" wrap>
                    <Badge label="8 updates" color="blue" />
                    <Badge label="3 reviews" color="green" />
                </Flex>
            )}
        />
    );
}

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
"use client";

import { Box, Button, WelcomeBanner } from '@photonix/ultimate';

export default function WelcomeBannerStandardExample() {
    return (
        <Box w="100%">
            <WelcomeBanner
                title="Ready to work?"
                description="You have 5 tasks to complete today."
                actions={<Button variant="primary">View Tasks</Button>}
            />
        </Box>
    );
}

Loading State

Displays a skeleton preview while data is being fetched.

Loading State
"use client";

import { Box, WelcomeBanner } from '@photonix/ultimate';

export default function WelcomeBannerLoadingExample() {
    return (
        <Box w="100%">
            <WelcomeBanner title="Hello" description="..." loading />
        </Box>
    );
}

Minimal Version

Simple title and description without extra elements.

Good Morning!

It's a great day to manifest your dreams.

Minimal Version
"use client";

import { Box, WelcomeBanner } from '@photonix/ultimate';

export default function WelcomeBannerMinimalExample() {
    return (
        <Box w="100%">
            <WelcomeBanner
                title="Good Morning!"
                description="It's a great day to manifest your dreams."
            />
        </Box>
    );
}

On this page

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