Empty state

Got an empty page with no content to show? Empty state has you covered! This handy component lets you add custom messages, visuals, or placeholders to make those empty states look polished and purposeful.

No more boring "nothing here" vibes—give your users a better experience with just a few lines of code.

Key features:

✅ Super easy to set up and customize.
✅ Works great with and Tailwind.
✅ Responsive and user-friendly right out of the box.
✅ Perfect for dashboards, lists and empty screens.

Basic empty state

Something has been achieved

You can do something with it, or you can not do it. And the description text can be quite long.

Empty state with image

No results for the term "NgStarter" in the our library. You can try another search term similar to this one.

Empty state with icon

No results for the term "NgStarter" in the our library. You can try another search term similar to this one.

Empty state with custom icon

No results for the term "Info" on the our planet.

Empty state with actions

Something has been achieved

You can do something with it, or you can not do it. And the description text can be quite long.

ngs-empty-state main empty state component.

ngs-empty-state-actions component - contains controls of an empty state.

ngs-empty-state-content component - contains content of an empty state.

ngs-empty-state-icon component - adds an icon to an empty state.

ngs-empty-state-image component - adds an image to an empty state.

ngs-empty-state-title component - adds a title to an empty state.