Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Empty overview

Empty provides a wrapper shell for no-data and no-results states with aligned icon, title, description, and action parts. Use the headless page when you want to own every markup detail yourself.

Imports

The wrapper is split into a root plus the same projected parts you use in markup, so teams can keep the structure explicit while still getting the default shell.

Wrapper imports

ts
import {
  TngEmptyActionsComponent,
  TngEmptyComponent,
  TngEmptyDescriptionComponent,
  TngEmptyIconComponent,
  TngEmptyTitleComponent,
} from '@tailng-ui/components';

Wrapper variants

Render the same wrapper composition with a plain CSS shell or a Tailwind page surface.

Wrapper empty state (plain CSS)

🔍

No matching projects

Adjust filters or clear search criteria to discover more projects.

Accessibility baseline

  • Use a specific title that names the empty condition, not just “Empty”.
  • Write description copy that explains the next useful action or why the surface has no content.
  • Keep the action labels concrete so the empty state becomes a recovery path, not a dead end.