Empty

The ownable Empty install gives your app a local empty-state wrapper with editable content structure, icon treatment, and action layout that can evolve with the screens that use it.

Why own Empty locally

Empty states often pick up product-specific artwork, tone, onboarding copy, and recovery actions. Local ownership keeps that messaging and layout close to the feature that depends on it instead of locking it behind a package release.

Adjust illustrations, action density, and copywriting to match the surface using the state.
Keep empty-state analytics hooks, feature links, and setup flows versioned with the owning feature.
Promote the generated wrapper into richer product-specific variants without forking library code.

What the install includes

The registry-backed empty install writes the primitive helper file, wrapper component, part templates, stylesheet, and export barrel. After install, the empty-state shell belongs to your app and can be edited like any other local source.

Ownable Install

Install Empty from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add empty

npx tailng add empty

Generated files

The command scaffolds local files under src/app/tailng-ui/empty.

src/app/tailng-ui/empty/tng-empty-primitive.ts
src/app/tailng-ui/empty/tng-empty.ts
src/app/tailng-ui/empty/tng-empty.html
src/app/tailng-ui/empty/tng-empty-icon.html
src/app/tailng-ui/empty/tng-empty-title.html
src/app/tailng-ui/empty/tng-empty-description.html
src/app/tailng-ui/empty/tng-empty-actions.html
src/app/tailng-ui/empty/tng-empty.css
src/app/tailng-ui/empty/index.ts

Import in your feature module/component

import { TngEmpty, TngEmptyIcon, TngEmptyTitle, TngEmptyDescription, TngEmptyActions, TngEmptyPrimitive, TngEmptyIconPrimitive, TngEmptyTitlePrimitive, TngEmptyDescriptionPrimitive, TngEmptyActionsPrimitive } from './tailng-ui/empty';

Usage

<tng-empty align="start">
  <tng-empty-icon>📭</tng-empty-icon>
  <tng-empty-title>No messages yet</tng-empty-title>
  <tng-empty-description>
    Invite your team or start a new conversation to populate this workspace.
  </tng-empty-description>
  <tng-empty-actions>
    <button type="button">Invite team</button>
  </tng-empty-actions>
</tng-empty>