shadcn-templ

Empty

Use the Empty component to display an empty state.

No results found

We couldn't find what you searched for. Try searching again.

templ
templ EmptyDemo() {
	<div class="flex w-full max-w-sm flex-col items-center justify-center py-12">
		@ui.Empty("py-10 px-6", nil) {
			@ui.EmptyIcon("", nil) {
				@icons.Package(icons.Props{Class: "h-12 w-12"})
			}
			@ui.EmptyTitle("", nil) {
				No results found
			}
			@ui.EmptyDescription("", nil) {
				We couldn't find what you searched for. Try searching again.
			}
			@ui.EmptyAction("", nil) {
				@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", nil) {
					Browse all
				}
			}
		}
	</div>
}