UI Components Showcase | Peak Performance Digital — Agency Theme

Standalone view

Breadcrumbs

Explicit per-route breadcrumb navigation with CSS-only separators and aria-current="page" on the last item.

3-item (typical)

2-item

Single item (edge case)

Show code

<Breadcrumbs
  items={[
    { label: "Home", href: "/" },
    { label: "Articles", href: "/articles/" },
    { label: "Building Accessible Components" },
  ]}
/>

{/* 2-item */}
<Breadcrumbs
  items={[{ label: "Home", href: "/" }, { label: "About Us" }]}
  label="Breadcrumb (2-item demo)"
/>

{/* Single item */}
<Breadcrumbs
  items={[{ label: "Home" }]}
  label="Breadcrumb (single-item demo)"
/>

EmptyState

Standardized empty-state pattern with optional icon and "Go Back" CTA. The CTA uses history.back() with JS, falls back to ctaHref without.

With icon and CTA (default)

No articles found matching your criteria.

Without icon

This collection is empty.

CTA suppressed

No results to display.

Show code

{/* With icon and CTA (default) */}
<EmptyState
  message="No articles found matching your criteria."
  icon="messages-question"
/>

{/* Without icon */}
<EmptyState message="This collection is empty." />

{/* CTA suppressed */}
<EmptyState
  message="No results to display."
  icon="messages-question"
  showCta={false}
/>

Pagination

Generalized page-based pagination with clean page-1 URLs. Renders nothing when totalPages <= 1.

Page 1 of 5 (no Previous)

Page 3 of 5 (both directions)

Page 5 of 5 (no Next)

Single page (renders nothing)

Nothing renders above — correct behavior for single-page results.

Show code

{/* Page 1 of 5 — no Previous */}
<Pagination baseHref="/articles" currentPage={1} totalPages={5} />

{/* Page 3 of 5 — both directions */}
<Pagination
  baseHref="/articles"
  currentPage={3}
  totalPages={5}
  label="Pagination (mid-page demo)"
/>

{/* Page 5 of 5 — no Next */}
<Pagination
  baseHref="/articles"
  currentPage={5}
  totalPages={5}
  label="Pagination (last-page demo)"
/>

{/* Single page — renders nothing */}
<Pagination
  baseHref="/articles"
  currentPage={1}
  totalPages={1}
/>

PrevNextNav

Previous/next navigation for ordered collection entries. Two-column grid with directional arrows.

Both prev and next

Next only (first item in collection)

Prev only (last item in collection)

Neither (renders nothing)

Nothing renders above — correct behavior when no adjacent items.

Show code

{/* Both prev and next */}
<PrevNextNav
  prev={{ label: "Getting Started", href: "#getting-started" }}
  next={{ label: "Advanced Usage", href: "#advanced-usage" }}
/>

{/* Next only */}
<PrevNextNav
  next={{ label: "Installation Guide", href: "#installation" }}
/>

{/* Prev only */}
<PrevNextNav
  prev={{ label: "Deployment Checklist", href: "/theme-docs/platform/deployment/" }}
/>

{/* Neither — renders nothing */}
<PrevNextNav />

RelatedContent

Related content section with heading and link list. Renders no markup when items is empty.

3 items (default heading)

1 item with custom heading

Empty array (renders nothing)

Nothing renders above — correct behavior for empty items.

Show code

{/* 3 items with default heading */}
<RelatedContent
  items={[
    { label: "Design Tokens Reference", href: "/theme-docs/design-system/design-tokens/" },
    { label: "Component Architecture", href: "/theme-docs/configuration/layouts/" },
    { label: "Validation Pipeline", href: "/theme-docs/platform/validation-pipeline/" },
  ]}
/>

{/* 1 item with custom heading */}
<RelatedContent
  items={[{ label: "Getting Started Guide", href: "#getting-started" }]}
  heading="Related Articles"
/>

{/* Empty array — renders nothing */}
<RelatedContent items={[]} />