Photonix

SlotPlaceholder

A visual placeholder component often used in empty states or variant selections.

Preview

Toolbar slotReplace this with project-specific actions.
Usage
"use client";

import { SlotPlaceholder } from '@photonix/ultimate';
import { SettingsOutline } from '@photonix/icons';

export default function SlotPlaceholderBasicExample() {
    return (
        <SlotPlaceholder
            title="Toolbar slot"
            description="Replace this with project-specific actions."
            icon={<SettingsOutline />}
            minHeight={160}
        />
    );
}

Component API

SlotPlaceholder

Prop
Type
Default
Description
title
string
'SlotPlaceholder'
Title text
description
string
"Replace this subcomponent in the variant properties with one you've built locally."
Description text
icon
React.ReactNode
-
Custom icon
minHeight
string | number
-
Minimum height

Variants

Basic

Default placeholder with title and description.

No ItemsAdd an item to get started.
Basic
"use client";

import { SlotPlaceholder } from '@photonix/ultimate';

export default function SlotPlaceholderExampleBasic() {
    return <SlotPlaceholder title="No Items" description="Add an item to get started." />;
}

Custom Icon

Placeholder with a custom icon.

OK
SuccessFile uploaded successfully.
Custom Icon
"use client";

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

export default function SlotPlaceholderIconExample() {
    return (
        <SlotPlaceholder
            title="Success"
            description="File uploaded successfully."
            icon={<Box p="xs" style={{ fontSize: '24px' }}>OK</Box>}
        />
    );
}

On this page

Preview
Component API
Variants
Basic
Custom Icon
Photonix UI - React Components, Templates & Figma Design System