A set of page-level building blocks for media library screens: a header with a title, description, sync button, error banner, and optional stat chips, plus matching empty, loading, and error states.

Import

import {
  MediaPageHeader,
  MediaEmptyState,
  MediaLoadingState,
  MediaErrorState,
} from "@yuhuanowo/yunui/patterns";

Header

onSync is a function, which can't cross the server→client boundary in MDX, so the header is rendered from a small client wrapper.

Empty state

The icon prop takes a Lucide component (a function), so this example is also rendered from a client wrapper.

Loading & error states

MediaLoadingState and MediaErrorState are static and can be used directly. MediaErrorState accepts an optional onRetry callback to render a retry button.

Props