Create your first item to get started.
Playground
<ply-empty-state iconName="info-circle" title="Nothing here yet" description="Create your first item to get started.">Empty State</ply-empty-state>
Empty states provide user guidance when there's no data to show, handling scenarios like zero results, missing permissions, or upcoming features. Use <ply-empty-state> for container placeholders and <ply-coming-soon> for page-level future features.
A standard placeholder for empty data views with an icon, text, and call-to-action.
Get started by creating a new project. You can add files and invite team members later.
<ply-empty-state
iconName="folder"
title="No projects found"
description="Get started by creating a new project. You can add files and invite team members later.">
<button ply-button color="primary">New Project</button>
</ply-empty-state>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add empty-state
// Paths are relative to aliases.components (default: src/app/components)
import { EmptyStateComponent } from './empty-state/empty-state.component';
@Component({
selector: 'app-empty-state-example',
imports: [
EmptyStateComponent
],
template: `...`
})
export class EmptyStateExampleComponent {}Install
npx ply-ui-cli add empty-state
Useful when filtering or searching lists results in no hits.
We couldn't find anything matching your search criteria. Try different keywords.
<ply-empty-state
iconName="search"
title="No results found"
description="We couldn't find anything matching your search criteria. Try different keywords.">
<button ply-button variant="outline" color="dark">Clear Search</button>
</ply-empty-state>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add empty-state
// Paths are relative to aliases.components (default: src/app/components)
import { EmptyStateComponent } from './empty-state/empty-state.component';
@Component({
selector: 'app-empty-state-example',
imports: [
EmptyStateComponent
],
template: `...`
})
export class EmptyStateExampleComponent {}Install
npx ply-ui-cli add empty-state
For full-page or section placeholders for upcoming features, use the dedicated <ply-coming-soon> component.
Our team is working hard to bring you this new feature. Stay tuned.
<ply-coming-soon
title="We're launching something new!"
description="Our team is working hard to bring you this new feature. Stay tuned.">
</ply-coming-soon>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add empty-state
// Paths are relative to aliases.components (default: src/app/components)
import { EmptyStateComponent } from './empty-state/empty-state.component';
@Component({
selector: 'app-empty-state-example',
imports: [
EmptyStateComponent
],
template: `...`
})
export class EmptyStateExampleComponent {}Install
npx ply-ui-cli add empty-state
Run the following command to add this component to your project:
npx ply-ui-cli add empty-state
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add empty-state
// Paths are relative to aliases.components (default: src/app/components)
import { EmptyStateComponent } from './empty-state/empty-state.component';
@Component({
selector: 'app-your-component',
imports: [
EmptyStateComponent
],
template: `...`
})
export class YourComponent {} API for empty-state — generated from JSDoc in the library source.
| API | Member | Type | Description |
|---|---|---|---|
ply-empty-state | iconName | string | The name of the SVG icon to display at the top. |
ply-empty-state | title | string | The primary heading text. |
ply-empty-state | description | string | The secondary body text explaining the empty state. |
Content