Empty

Use the Empty component to display a empty state.

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUpRight, lucideFolderCode } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';

@Component({
	selector: 'spartan-empty-preview',
	imports: [NgIcon, HlmButton, HlmEmptyImports],
	providers: [provideIcons({ lucideFolderCode, lucideArrowUpRight })],
	template: `
		<hlm-empty>
			<hlm-empty-header>
				<hlm-empty-media variant="icon">
					<ng-icon name="lucideFolderCode" />
				</hlm-empty-media>
				<div hlmEmptyTitle>No Projects Yet</div>
				<div hlmEmptyDescription>
					You haven&apos;t created any projects yet. Get started by creating your first project.
				</div>
			</hlm-empty-header>
			<hlm-empty-content class="flex-row justify-center gap-2">
				<button hlmBtn>Create Project</button>
				<button hlmBtn variant="outline">Import Project</button>
			</hlm-empty-content>
			<a href="#" hlmBtn class="text-muted-foreground" variant="link" size="sm">
				Learn More
				<ng-icon name="lucideArrowUpRight" />
			</a>
		</hlm-empty>
	`,
})
export class EmptyPreview {}

Installation

ng g @spartan-ng/cli:ui empty

nx g @spartan-ng/cli:ui empty

import { DestroyRef, ElementRef, HostAttributeToken, Injector, PLATFORM_ID, effect, inject, runInInjectionContext } from '@angular/core';
import { clsx, type ClassValue } from 'clsx';
import { isPlatformBrowser } from '@angular/common';
import { twMerge } from 'tailwind-merge';

export function hlm(...inputs: ClassValue[]) {
	return twMerge(clsx(inputs));
}

// Global map to track class managers per element
const elementClassManagers = new WeakMap<HTMLElement, ElementClassManager>();
// Global mutation observer for all elements
let globalObserver: MutationObserver | null = null;
const observedElements = new Set<HTMLElement>();

interface ElementClassManager {
	element: HTMLElement;
	sources: Map<number, { classes: Set<string>; order: number }>;
	baseClasses: Set<string>;
	isUpdating: boolean;
	nextOrder: number;
	hasInitialized: boolean;
	restoreRafId: number | null;
	/** Transitions are suppressed until the first effect writes correct classes */
	transitionsSuppressed: boolean;
	/** Original inline transition value to restore after suppression (empty string = none was set) */
	previousTransition: string;
	/** Original inline transition priority to preserve !important when restoring */
	previousTransitionPriority: string;
}

let sourceCounter = 0;

/**
 * This function dynamically adds and removes classes for a given element without requiring
 * the a class binding (e.g. `[class]="..."`) which may interfere with other class bindings.
 *
 * 1. This will merge the existing classes on the element with the new classes.
 * 2. It will also remove any classes that were previously added by this function but are no longer present in the new classes.
 * 3. Multiple calls to this function on the same element will be merged efficiently.
 */
export function classes(computed: () => ClassValue[] | string, options: ClassesOptions = {}) {
	runInInjectionContext(options.injector ?? inject(Injector), () => {
		const elementRef = options.elementRef ?? inject(ElementRef);
		const platformId = inject(PLATFORM_ID);
		const destroyRef = inject(DestroyRef);
		const baseClasses = inject(new HostAttributeToken('class'), { optional: true });

		const element = elementRef.nativeElement;

		// Create unique identifier for this source
		const sourceId = sourceCounter++;

		// Get or create the class manager for this element
		let manager = elementClassManagers.get(element);

		if (!manager) {
			// Initialize base classes from variation (host attribute 'class')
			const initialBaseClasses = new Set<string>();

			if (baseClasses) {
				toClassList(baseClasses).forEach((cls) => initialBaseClasses.add(cls));
			}

			manager = {
				element,
				sources: new Map(),
				baseClasses: initialBaseClasses,
				isUpdating: false,
				nextOrder: 0,
				hasInitialized: false,
				restoreRafId: null,
				transitionsSuppressed: false,
				previousTransition: '',
				previousTransitionPriority: '',
			};
			elementClassManagers.set(element, manager);

			// Setup global observer if needed and register this element
			setupGlobalObserver(platformId);
			observedElements.add(element);

			// Suppress transitions until the first effect writes correct classes and
			// the browser has painted them. This prevents CSS transition animations
			// during hydration when classes change from SSR state to client state.
			if (isPlatformBrowser(platformId)) {
				manager.previousTransition = element.style.getPropertyValue('transition');
				manager.previousTransitionPriority = element.style.getPropertyPriority('transition');
				element.style.setProperty('transition', 'none', 'important');
				manager.transitionsSuppressed = true;
			}
		}

		// Assign order once at registration time
		const sourceOrder = manager.nextOrder++;

		function updateClasses(): void {
			// Get the new classes from the computed function
			const newClasses = toClassList(computed());

			// Update this source's classes, keeping the original order
			manager!.sources.set(sourceId, {
				classes: new Set(newClasses),
				order: sourceOrder,
			});

			// Update the element
			updateElement(manager!);

			// Re-enable transitions after the first effect writes correct classes.
			// Deferred to next animation frame so the browser paints the class change
			// with transitions disabled first, then re-enables them.
			if (manager!.transitionsSuppressed) {
				manager!.transitionsSuppressed = false;
				manager!.restoreRafId = requestAnimationFrame(() => {
					manager!.restoreRafId = null;
					restoreTransitionSuppression(manager!);
				});
			}
		}

		// Register cleanup with DestroyRef
		destroyRef.onDestroy(() => {
			if (manager!.restoreRafId !== null) {
				cancelAnimationFrame(manager!.restoreRafId);
				manager!.restoreRafId = null;
			}

			if (manager!.transitionsSuppressed) {
				manager!.transitionsSuppressed = false;
				restoreTransitionSuppression(manager!);
			}

			// Remove this source from the manager
			manager!.sources.delete(sourceId);

			// If no more sources, clean up the manager
			if (manager!.sources.size === 0) {
				cleanupManager(element);
			} else {
				// Update element without this source's classes
				updateElement(manager!);
			}
		});

		/**
		 * We need this effect to track changes to the computed classes. Ideally, we would use
		 * afterRenderEffect here, but that doesn't run in SSR contexts, so we use a standard
		 * effect which works in both browser and SSR.
		 */
		effect(updateClasses);
	});
}

function restoreTransitionSuppression(manager: ElementClassManager): void {
	const prev = manager.previousTransition;
	if (prev) {
		manager.element.style.setProperty('transition', prev, manager.previousTransitionPriority || undefined);
	} else {
		manager.element.style.removeProperty('transition');
	}
}

// eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
function setupGlobalObserver(platformId: Object): void {
	if (isPlatformBrowser(platformId) && !globalObserver) {
		// Create single global observer that watches the entire document
		globalObserver = new MutationObserver((mutations) => {
			for (const mutation of mutations) {
				if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
					const element = mutation.target as HTMLElement;
					const manager = elementClassManagers.get(element);

					// Only process elements we're managing
					if (manager && observedElements.has(element)) {
						if (manager.isUpdating) continue; // Ignore changes we're making

						// Update base classes to include any externally added classes
						const currentClasses = toClassList(element.className);
						const allSourceClasses = new Set<string>();

						// Collect all classes from all sources
						for (const source of manager.sources.values()) {
							for (const className of source.classes) {
								allSourceClasses.add(className);
							}
						}

						// Any classes not from sources become new base classes
						manager.baseClasses.clear();

						for (const className of currentClasses) {
							if (!allSourceClasses.has(className)) {
								manager.baseClasses.add(className);
							}
						}

						updateElement(manager);
					}
				}
			}
		});

		// Start observing the entire document for class attribute changes
		globalObserver.observe(document, {
			attributes: true,
			attributeFilter: ['class'],
			subtree: true, // Watch all descendants
		});
	}
}

function updateElement(manager: ElementClassManager): void {
	if (manager.isUpdating) return; // Prevent recursive updates

	manager.isUpdating = true;

	// Handle initialization: capture base classes after first source registration
	if (!manager.hasInitialized && manager.sources.size > 0) {
		// Get current classes on element (may include SSR classes)
		const currentClasses = toClassList(manager.element.className);

		// Get all classes that will be applied by sources
		const allSourceClasses = new Set<string>();
		for (const source of manager.sources.values()) {
			source.classes.forEach((className) => allSourceClasses.add(className));
		}

		// Only consider classes as "base" if they're not produced by any source
		// This prevents SSR-rendered classes from being preserved as base classes
		currentClasses.forEach((className) => {
			if (!allSourceClasses.has(className)) {
				manager.baseClasses.add(className);
			}
		});

		manager.hasInitialized = true;
	}

	// Get classes from all sources, sorted by registration order (later takes precedence)
	const sortedSources = Array.from(manager.sources.entries()).sort(([, a], [, b]) => a.order - b.order);

	const allSourceClasses: string[] = [];
	for (const [, source] of sortedSources) {
		allSourceClasses.push(...source.classes);
	}

	// Combine base classes with all source classes, ensuring base classes take precedence
	const classesToApply =
		allSourceClasses.length > 0 || manager.baseClasses.size > 0
			? hlm([...allSourceClasses, ...manager.baseClasses])
			: '';

	// Apply the classes to the element
	if (manager.element.className !== classesToApply) {
		manager.element.className = classesToApply;
	}

	manager.isUpdating = false;
}

function cleanupManager(element: HTMLElement): void {
	// Remove from global tracking
	observedElements.delete(element);
	elementClassManagers.delete(element);

	// If no more elements being tracked, cleanup global observer
	if (observedElements.size === 0 && globalObserver) {
		globalObserver.disconnect();
		globalObserver = null;
	}
}

interface ClassesOptions {
	elementRef?: ElementRef<HTMLElement>;
	injector?: Injector;
}

// Cache for parsed class lists to avoid repeated string operations
const classListCache = new Map<string, string[]>();

function toClassList(className: string | ClassValue[]): string[] {
	// For simple string inputs, use cache to avoid repeated parsing
	if (typeof className === 'string' && classListCache.has(className)) {
		return classListCache.get(className)!;
	}

	const result = clsx(className)
		.split(' ')
		.filter((c) => c.length > 0);

	// Cache string results, but limit cache size to prevent memory growth
	if (typeof className === 'string' && classListCache.size < 1000) {
		classListCache.set(className, result);
	}

	return result;
}

import { Directive, input } from '@angular/core';
import { VariantProps, cva } from 'class-variance-authority';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmEmptyContent],hlm-empty-content',
	host: { 'data-slot': 'empty-content' },
})
export class HlmEmptyContent {
	constructor() {
		classes(() => 'gap-4 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance');
	}
}

@Directive({
	selector: '[hlmEmptyDescription]',
	host: { 'data-slot': 'empty-description' },
})
export class HlmEmptyDescription {
	constructor() {
		classes(
			() =>
				'text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmEmptyHeader],hlm-empty-header',
	host: { 'data-slot': 'empty-header' },
})
export class HlmEmptyHeader {
	constructor() {
		classes(() => 'gap-2 flex max-w-sm flex-col items-center');
	}
}

const emptyMediaVariants = cva(
	'mb-2 flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: 'bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*6)]',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);

export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;

@Directive({
	selector: '[hlmEmptyMedia],hlm-empty-media',
	host: {
		'data-slot': 'empty-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmEmptyMedia {
	public readonly variant = input<EmptyMediaVariants['variant']>();

	constructor() {
		classes(() => emptyMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmEmptyTitle]',
	host: { 'data-slot': 'empty-title' },
})
export class HlmEmptyTitle {
	constructor() {
		classes(() => 'text-lg font-medium tracking-tight');
	}
}

@Directive({
	selector: '[hlmEmpty],hlm-empty',
	host: { 'data-slot': 'empty' },
})
export class HlmEmpty {
	constructor() {
		classes(
			() => 'gap-4 rounded-lg border-dashed p-12 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
		);
	}
}

export const HlmEmptyImports = [
	HlmEmpty,
	HlmEmptyContent,
	HlmEmptyDescription,
	HlmEmptyHeader,
	HlmEmptyTitle,
	HlmEmptyMedia,
] as const;

import { Directive, input } from '@angular/core';
import { VariantProps, cva } from 'class-variance-authority';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmEmptyContent],hlm-empty-content',
	host: { 'data-slot': 'empty-content' },
})
export class HlmEmptyContent {
	constructor() {
		classes(() => 'gap-2.5 text-xs flex w-full max-w-sm min-w-0 flex-col items-center text-balance');
	}
}

@Directive({
	selector: '[hlmEmptyDescription]',
	host: { 'data-slot': 'empty-description' },
})
export class HlmEmptyDescription {
	constructor() {
		classes(
			() =>
				'text-xs/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmEmptyHeader],hlm-empty-header',
	host: { 'data-slot': 'empty-header' },
})
export class HlmEmptyHeader {
	constructor() {
		classes(() => 'gap-2 flex max-w-sm flex-col items-center');
	}
}

const emptyMediaVariants = cva(
	'mb-2 flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: 'bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-none [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)]',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);

export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;

@Directive({
	selector: '[hlmEmptyMedia],hlm-empty-media',
	host: {
		'data-slot': 'empty-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmEmptyMedia {
	public readonly variant = input<EmptyMediaVariants['variant']>();

	constructor() {
		classes(() => emptyMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmEmptyTitle]',
	host: { 'data-slot': 'empty-title' },
})
export class HlmEmptyTitle {
	constructor() {
		classes(() => 'text-sm font-medium');
	}
}

@Directive({
	selector: '[hlmEmpty],hlm-empty',
	host: { 'data-slot': 'empty' },
})
export class HlmEmpty {
	constructor() {
		classes(
			() => 'gap-4 rounded-none border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
		);
	}
}

export const HlmEmptyImports = [
	HlmEmpty,
	HlmEmptyContent,
	HlmEmptyDescription,
	HlmEmptyHeader,
	HlmEmptyTitle,
	HlmEmptyMedia,
] as const;

import { Directive, input } from '@angular/core';
import { VariantProps, cva } from 'class-variance-authority';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmEmptyContent],hlm-empty-content',
	host: { 'data-slot': 'empty-content' },
})
export class HlmEmptyContent {
	constructor() {
		classes(() => 'gap-4 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance');
	}
}

@Directive({
	selector: '[hlmEmptyDescription]',
	host: { 'data-slot': 'empty-description' },
})
export class HlmEmptyDescription {
	constructor() {
		classes(
			() =>
				'text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmEmptyHeader],hlm-empty-header',
	host: { 'data-slot': 'empty-header' },
})
export class HlmEmptyHeader {
	constructor() {
		classes(() => 'gap-2 flex max-w-sm flex-col items-center');
	}
}

const emptyMediaVariants = cva(
	'mb-2 flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: 'bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*6)]',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);

export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;

@Directive({
	selector: '[hlmEmptyMedia],hlm-empty-media',
	host: {
		'data-slot': 'empty-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmEmptyMedia {
	public readonly variant = input<EmptyMediaVariants['variant']>();

	constructor() {
		classes(() => emptyMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmEmptyTitle]',
	host: { 'data-slot': 'empty-title' },
})
export class HlmEmptyTitle {
	constructor() {
		classes(() => 'text-lg font-medium tracking-tight');
	}
}

@Directive({
	selector: '[hlmEmpty],hlm-empty',
	host: { 'data-slot': 'empty' },
})
export class HlmEmpty {
	constructor() {
		classes(
			() => 'gap-4 rounded-lg border-dashed p-12 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
		);
	}
}

export const HlmEmptyImports = [
	HlmEmpty,
	HlmEmptyContent,
	HlmEmptyDescription,
	HlmEmptyHeader,
	HlmEmptyTitle,
	HlmEmptyMedia,
] as const;

import { Directive, input } from '@angular/core';
import { VariantProps, cva } from 'class-variance-authority';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmEmptyContent],hlm-empty-content',
	host: { 'data-slot': 'empty-content' },
})
export class HlmEmptyContent {
	constructor() {
		classes(() => 'gap-2 text-xs/relaxed flex w-full max-w-sm min-w-0 flex-col items-center text-balance');
	}
}

@Directive({
	selector: '[hlmEmptyDescription]',
	host: { 'data-slot': 'empty-description' },
})
export class HlmEmptyDescription {
	constructor() {
		classes(
			() =>
				'text-xs/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmEmptyHeader],hlm-empty-header',
	host: { 'data-slot': 'empty-header' },
})
export class HlmEmptyHeader {
	constructor() {
		classes(() => 'gap-1 flex max-w-sm flex-col items-center');
	}
}

const emptyMediaVariants = cva(
	'mb-2 flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: 'bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-md [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)]',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);

export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;

@Directive({
	selector: '[hlmEmptyMedia],hlm-empty-media',
	host: {
		'data-slot': 'empty-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmEmptyMedia {
	public readonly variant = input<EmptyMediaVariants['variant']>();

	constructor() {
		classes(() => emptyMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmEmptyTitle]',
	host: { 'data-slot': 'empty-title' },
})
export class HlmEmptyTitle {
	constructor() {
		classes(() => 'text-sm font-medium tracking-tight');
	}
}

@Directive({
	selector: '[hlmEmpty],hlm-empty',
	host: { 'data-slot': 'empty' },
})
export class HlmEmpty {
	constructor() {
		classes(
			() => 'gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
		);
	}
}

export const HlmEmptyImports = [
	HlmEmpty,
	HlmEmptyContent,
	HlmEmptyDescription,
	HlmEmptyHeader,
	HlmEmptyTitle,
	HlmEmptyMedia,
] as const;

import { Directive, input } from '@angular/core';
import { VariantProps, cva } from 'class-variance-authority';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmEmptyContent],hlm-empty-content',
	host: { 'data-slot': 'empty-content' },
})
export class HlmEmptyContent {
	constructor() {
		classes(() => 'gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance');
	}
}

@Directive({
	selector: '[hlmEmptyDescription]',
	host: { 'data-slot': 'empty-description' },
})
export class HlmEmptyDescription {
	constructor() {
		classes(
			() =>
				'text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmEmptyHeader],hlm-empty-header',
	host: { 'data-slot': 'empty-header' },
})
export class HlmEmptyHeader {
	constructor() {
		classes(() => 'gap-2 flex max-w-sm flex-col items-center');
	}
}

const emptyMediaVariants = cva(
	'mb-2 flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: 'bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)]',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);

export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;

@Directive({
	selector: '[hlmEmptyMedia],hlm-empty-media',
	host: {
		'data-slot': 'empty-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmEmptyMedia {
	public readonly variant = input<EmptyMediaVariants['variant']>();

	constructor() {
		classes(() => emptyMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmEmptyTitle]',
	host: { 'data-slot': 'empty-title' },
})
export class HlmEmptyTitle {
	constructor() {
		classes(() => 'text-sm font-medium tracking-tight');
	}
}

@Directive({
	selector: '[hlmEmpty],hlm-empty',
	host: { 'data-slot': 'empty' },
})
export class HlmEmpty {
	constructor() {
		classes(
			() => 'gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
		);
	}
}

export const HlmEmptyImports = [
	HlmEmpty,
	HlmEmptyContent,
	HlmEmptyDescription,
	HlmEmptyHeader,
	HlmEmptyTitle,
	HlmEmptyMedia,
] as const;

import { Directive, input } from '@angular/core';
import { VariantProps, cva } from 'class-variance-authority';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmEmptyContent],hlm-empty-content',
	host: { 'data-slot': 'empty-content' },
})
export class HlmEmptyContent {
	constructor() {
		classes(() => 'gap-4 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance');
	}
}

@Directive({
	selector: '[hlmEmptyDescription]',
	host: { 'data-slot': 'empty-description' },
})
export class HlmEmptyDescription {
	constructor() {
		classes(
			() =>
				'text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmEmptyHeader],hlm-empty-header',
	host: { 'data-slot': 'empty-header' },
})
export class HlmEmptyHeader {
	constructor() {
		classes(() => 'gap-2 flex max-w-sm flex-col items-center');
	}
}

const emptyMediaVariants = cva(
	'mb-2 flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: 'bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-xl [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*5)]',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);

export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;

@Directive({
	selector: '[hlmEmptyMedia],hlm-empty-media',
	host: {
		'data-slot': 'empty-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmEmptyMedia {
	public readonly variant = input<EmptyMediaVariants['variant']>();

	constructor() {
		classes(() => emptyMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmEmptyTitle]',
	host: { 'data-slot': 'empty-title' },
})
export class HlmEmptyTitle {
	constructor() {
		classes(() => 'text-lg font-medium tracking-tight');
	}
}

@Directive({
	selector: '[hlmEmpty],hlm-empty',
	host: { 'data-slot': 'empty' },
})
export class HlmEmpty {
	constructor() {
		classes(
			() => 'gap-4 rounded-2xl border-dashed p-12 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
		);
	}
}

export const HlmEmptyImports = [
	HlmEmpty,
	HlmEmptyContent,
	HlmEmptyDescription,
	HlmEmptyHeader,
	HlmEmptyTitle,
	HlmEmptyMedia,
] as const;

Usage

import { HlmEmptyImports } from '@spartan-ng/helm/empty';

<hlm-empty>
  <hlm-empty-header>
    <hlm-empty-media variant="icon">
      <ng-icon name="lucideFolderCode" />
    </hlm-empty-media>
    <div hlmEmptyTitle>No data</div>
    <div hlmEmptyDescription>No data found</div>
  </hlm-empty-header>
  <hlm-empty-content>
    <button hlmBtn>Add data</button>
  </hlm-empty-content>
</hlm-empty>

Examples

Outline

Use the border utility class to create a outline empty state.

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCloud } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';

@Component({
	selector: 'spartan-empty-outline',
	imports: [NgIcon, HlmButton, HlmEmptyImports],
	providers: [provideIcons({ lucideCloud })],
	template: `
		<div hlmEmpty class="border border-dashed">
			<div hlmEmptyHeader>
				<div hlmEmptyMedia variant="icon">
					<ng-icon name="lucideCloud" />
				</div>
				<div hlmEmptyTitle>Cloud Storage Empty</div>
				<div hlmEmptyDescription>Upload files to your cloud storage to access them anywhere.</div>
			</div>
			<div hlmEmptyContent>
				<button hlmBtn variant="outline">Upload Files</button>
			</div>
		</div>
	`,
})
export class EmptyOutline {}

Background

Use the bg-* and bg-gradient-* utilities to add a background to the empty state.

No notifications

You're all caught up. New notifications will appear here.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBell, lucideRefreshCcw } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';

@Component({
	selector: 'spartan-empty-background',
	imports: [NgIcon, HlmButton, HlmEmptyImports],
	providers: [provideIcons({ lucideBell, lucideRefreshCcw })],
	template: `
		<div hlmEmpty class="from-muted/50 to-background h-full w-full bg-gradient-to-b from-30%">
			<div hlmEmptyHeader>
				<div hlmEmptyMedia variant="icon">
					<ng-icon name="lucideBell" />
				</div>
				<div hlmEmptyTitle>No notifications</div>
				<div hlmEmptyDescription>You're all caught up. New notifications will appear here.</div>
			</div>
			<div hlmEmptyContent>
				<button hlmBtn variant="outline">
					<ng-icon hlm name="lucideRefreshCcw" />
					Refresh
				</button>
			</div>
		</div>
	`,
})
export class EmptyBackground {}

Avatar

Use the EmptyMedia component to display an avatar in the empty state.

User Offline

This user is currently offline. You can leave a message to notify them or try again later.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideMessageCircle } from '@ng-icons/lucide';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';

@Component({
	selector: 'spartan-empty-avatar',
	imports: [NgIcon, HlmButton, HlmEmptyImports, HlmAvatarImports],
	providers: [provideIcons({ lucideMessageCircle })],
	template: `
		<div hlmEmpty>
			<div hlmEmptyHeader>
				<div hlmEmptyMedia>
					<hlm-avatar class="size-12">
						<img src="/assets/avatar.png" alt="spartan logo. Resembling a spartanic shield" hlmAvatarImage />
						<span class="bg-[#FD005B] text-white" hlmAvatarFallback>RG</span>
					</hlm-avatar>
				</div>
				<div hlmEmptyTitle>User Offline</div>
				<div hlmEmptyDescription>
					This user is currently offline. You can leave a message to notify them or try again later.
				</div>
			</div>
			<div hlmEmptyContent>
				<button hlmBtn size="sm">
					<ng-icon hlm name="lucideMessageCircle" />
					Leave message
				</button>
			</div>
		</div>
	`,
})
export class EmptyAvatar {}

Avatar Group

Use the EmptyMedia component to display an avatar group in the empty state.

No Team Members

Invite your team to collaborate on this project.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';

@Component({
	selector: 'spartan-empty-avatar-group',
	imports: [NgIcon, HlmButton, HlmEmptyImports, HlmAvatarImports],
	providers: [provideIcons({ lucidePlus })],
	template: `
		<div hlmEmpty>
			<div hlmEmptyHeader>
				<div hlmEmptyMedia>
					<div
						class="[&>hlm-avatar]:ring-background flex -space-x-2 [&>hlm-avatar]:size-12 [&>hlm-avatar]:ring-2 [&>hlm-avatar]:grayscale"
					>
						<hlm-avatar class="size-12">
							<img src="https://picsum.photos/1000/800?grayscale&random=1" alt="avatar 1" hlmAvatarImage />
							<span class="bg-[#FD005B] text-white" hlmAvatarFallback>A1</span>
						</hlm-avatar>
						<hlm-avatar class="size-12">
							<img src="https://picsum.photos/1000/800?grayscale&random=2" alt="avatar 2" hlmAvatarImage />
							<span class="bg-[#FD005B] text-white" hlmAvatarFallback>A2</span>
						</hlm-avatar>
						<hlm-avatar class="size-12">
							<img src="https://picsum.photos/1000/800?grayscale&random=3" alt="avatar 3" hlmAvatarImage />
							<span class="bg-[#FD005B] text-white" hlmAvatarFallback>A3</span>
						</hlm-avatar>
					</div>
				</div>
				<div hlmEmptyTitle>No Team Members</div>
				<div hlmEmptyDescription>Invite your team to collaborate on this project.</div>
			</div>
			<div hlmEmptyContent>
				<button hlmBtn size="sm">
					<ng-icon hlm name="lucidePlus" />
					Invite Members
				</button>
			</div>
		</div>
	`,
})
export class EmptyAvatarGroup {}

Input Group

You can add an InputGroup component to the EmptyContent component.

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact Support

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideSearch } from '@ng-icons/lucide';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';

@Component({
	selector: 'spartan-empty-input-group',
	imports: [NgIcon, HlmEmptyImports, HlmInputGroupImports, HlmKbdImports],
	providers: [provideIcons({ lucideSearch })],
	template: `
		<hlm-empty>
			<hlm-empty-header>
				<div hlmEmptyTitle>404 - Not Found</div>
				<div hlmEmptyDescription>The page you're looking for doesn't exist. Try searching for what you need below.</div>
			</hlm-empty-header>
			<hlm-empty-content>
				<hlm-input-group class="sm:w-3/4">
					<input hlmInputGroupInput placeholder="Try searching for pages..." />
					<hlm-input-group-addon>
						<ng-icon name="lucideSearch" />
					</hlm-input-group-addon>
					<hlm-input-group-addon align="inline-end">
						<kbd hlmKbd>/</kbd>
					</hlm-input-group-addon>
				</hlm-input-group>
				<div hlmEmptyDescription>
					Need help?
					<a href="#">Contact Support</a>
				</div>
			</hlm-empty-content>
		</hlm-empty>
	`,
})
export class EmptyInputGroup {}

RTL

To enable RTL support in spartan-ng, see the RTL configuration guide.

لا توجد مشاريع بعد

لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.

تعرف على المزيد

import { Component, computed, inject } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUpRight, lucideFolderCode } from '@ng-icons/lucide';
import { TranslateService, Translations } from '@spartan-ng/app/app/shared/translate.service';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';

@Component({
	selector: 'spartan-empty-rtl',
	imports: [NgIcon, HlmButton, HlmEmptyImports],
	providers: [provideIcons({ lucideFolderCode, lucideArrowUpRight })],
	template: `
		<hlm-empty [dir]="_dir()">
			<hlm-empty-header>
				<hlm-empty-media variant="icon">
					<ng-icon name="lucideFolderCode" />
				</hlm-empty-media>
				<div hlmEmptyTitle>{{ _t()['title'] }}</div>
				<div hlmEmptyDescription>
					{{ _t()['description'] }}
				</div>
			</hlm-empty-header>
			<hlm-empty-content class="flex-row justify-center gap-2">
				<button hlmBtn>{{ _t()['createProject'] }}</button>
				<button hlmBtn variant="outline">{{ _t()['importProject'] }}</button>
			</hlm-empty-content>
			<a href="#" hlmBtn class="text-muted-foreground" variant="link" size="sm">
				{{ _t()['learnMore'] }}
				<ng-icon name="lucideArrowUpRight" class="rtl:rotate-270" />
			</a>
		</hlm-empty>
	`,
})
export class EmptyRtl {
	private readonly _language = inject(TranslateService).language;

	private readonly _translations: Translations = {
		en: {
			dir: 'ltr',
			values: {
				title: 'No Projects Yet',
				description: "You haven't created any projects yet. Get started by creating your first project.",
				createProject: 'Create Project',
				importProject: 'Import Project',
				learnMore: 'Learn More',
			},
		},
		ar: {
			dir: 'rtl',
			values: {
				title: 'لا توجد مشاريع بعد',
				description: 'لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.',
				createProject: 'إنشاء مشروع',
				importProject: 'استيراد مشروع',
				learnMore: 'تعرف على المزيد',
			},
		},
		he: {
			dir: 'rtl',
			values: {
				title: 'אין פרויקטים עדיין',
				description: 'עדיין לא יצרת פרויקטים. התחל על ידי יצירת הפרויקט הראשון שלך.',
				createProject: 'צור פרויקט',
				importProject: 'ייבא פרויקט',
				learnMore: 'למד עוד',
			},
		},
	};

	private readonly _translation = computed(() => this._translations[this._language()]);
	protected readonly _t = computed(() => this._translation().values);
	protected readonly _dir = computed(() => this._translation().dir);
}

Helm API

HlmEmptyContent

Selector: [hlmEmptyContent],hlm-empty-content

HlmEmptyDescription

Selector: [hlmEmptyDescription]

HlmEmptyHeader

Selector: [hlmEmptyHeader],hlm-empty-header

HlmEmptyMedia

Selector: [hlmEmptyMedia],hlm-empty-media

Inputs

Prop	Type	Default	Description
variant	EmptyMediaVariants['variant']	-	-

HlmEmptyTitle

Selector: [hlmEmptyTitle]

HlmEmpty

Selector: [hlmEmpty],hlm-empty

Field

Dropdown Menu

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.