Empty

Empty state primitives.

Use Empty to guide users when there is nothing to display.

+
No results
Try adjusting your search or filters.
import { Empty, EmptyMedia, EmptyTitle, EmptyDescription } from '@tile-ui/react';

export default function EmptyDemo() {
	return (
		<Empty>
			<EmptyMedia variant="default">+</EmptyMedia>

Registry install

pnpm dlx shadcn@latest add @tile-ui/empty

Package usage

import { Empty, EmptyMedia, EmptyTitle, EmptyDescription } from '@tile-ui/react';
 
<Empty>
	<EmptyMedia variant="muted">+</EmptyMedia>
	<EmptyTitle>No results</EmptyTitle>
	<EmptyDescription>Try adjusting your search.</EmptyDescription>
</Empty>

Highlights

  • Header, media, title, and description
  • Default and icon media variants

Registry dependencies

ItemPurpose
emptyComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

EmptyMedia

PropTypeDefault
variant'default' | 'icon'