Block state

Got an empty page with no content to show? Block state has you covered! This handy Angular Material 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 Angular Material and Tailwind.
✅ Responsive and user-friendly right out of the box.
✅ Perfect for dashboards, lists and empty screens.

Basic block state

Block state with image

Block state with icon

Block state with custom icon

Block state with actions

emr-block-state main block state component.

emr-block-state-actions component - contains controls of a block state.

emr-block-state-content component - contains content of a block state.

emr-block-state-icon component - adds an icon to a block state.

emr-block-state-image component - adds an image to a block state.

emr-block-state-title component - adds a title to a block state.