diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 2be945412f45..91a100b748c9 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -196,7 +196,7 @@
 /src/dev-app/mdc-input/**                              @devversion @mmalerba
 /src/dev-app/mdc-list/**                               @mmalerba
 /src/dev-app/mdc-menu/**                               @crisbeto
-/src/dev-app/mdc-paginator/**                          @crisbeto
+/src/dev-app/legacy-paginator/**                       @crisbeto
 /src/dev-app/mdc-progress-bar/**                       @crisbeto
 /src/dev-app/mdc-progress-spinner/**                   @mmalerba
 /src/dev-app/mdc-radio/**                              @mmalerba
diff --git a/src/components-examples/material/legacy-paginator/BUILD.bazel b/src/components-examples/material/legacy-paginator/BUILD.bazel
new file mode 100644
index 000000000000..3d606fbd0ce9
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/BUILD.bazel
@@ -0,0 +1,55 @@
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-paginator",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/components-examples/private:localize_types",
+        "//src/material/legacy-input",
+        "//src/material/legacy-paginator",
+        "//src/material/legacy-paginator/testing",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
+    ]),
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":legacy-paginator",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/legacy-paginator",
+        "//src/material/legacy-paginator/testing",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)
diff --git a/src/components-examples/material/legacy-paginator/index.ts b/src/components-examples/material/legacy-paginator/index.ts
new file mode 100644
index 000000000000..4efbedef8d6e
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/index.ts
@@ -0,0 +1,39 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
+import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example';
+import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
+import {PaginatorHarnessExample} from './paginator-harness/paginator-harness-example';
+import {
+  PaginatorIntlExample,
+  PaginatorIntlExampleModule,
+} from './paginator-intl/paginator-intl-example';
+
+export {
+  PaginatorConfigurableExample,
+  PaginatorHarnessExample,
+  PaginatorIntlExample,
+  PaginatorOverviewExample,
+};
+
+const EXAMPLES = [
+  PaginatorConfigurableExample,
+  PaginatorHarnessExample,
+  // PaginatorIntlExample is imported through it's own example module.
+  PaginatorOverviewExample,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatLegacyInputModule,
+    MatLegacyPaginatorModule,
+    PaginatorIntlExampleModule,
+    FormsModule,
+  ],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+})
+export class PaginatorExamplesModule {}
diff --git a/src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.css b/src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.css
new file mode 100644
index 000000000000..9cf43ddbc1f3
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.css
@@ -0,0 +1,3 @@
+.mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.html b/src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.html
new file mode 100644
index 000000000000..e6ce26b5d8be
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.html
@@ -0,0 +1,28 @@
+<mat-form-field appearance="fill">
+  <mat-label>List length</mat-label>
+  <input matInput [(ngModel)]="length" type="number">
+</mat-form-field>
+
+<mat-form-field appearance="fill">
+  <mat-label>Page size</mat-label>
+  <input matInput [(ngModel)]="pageSize" type="number">
+</mat-form-field>
+<mat-form-field appearance="fill">
+  <mat-label>Page size options</mat-label>
+  <input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)"
+         [ngModelOptions]="{updateOn: 'blur'}" placeholder="Ex. 10,25,50">
+</mat-form-field>
+
+<mat-paginator [length]="length"
+               [pageSize]="pageSize"
+               [pageSizeOptions]="pageSizeOptions"
+               (page)="pageEvent = $event"
+               aria-label="Select page">
+</mat-paginator>
+
+<div *ngIf="pageEvent">
+  <h5>Page Change Event Properties</h5>
+  <div>List length: {{pageEvent.length}}</div>
+  <div>Page size: {{pageEvent.pageSize}}</div>
+  <div>Page index: {{pageEvent.pageIndex}}</div>
+</div>
diff --git a/src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.ts b/src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.ts
new file mode 100644
index 000000000000..6373e7a6f43f
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.ts
@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {PageEvent} from '@angular/material/legacy-paginator';
+
+/**
+ * @title Configurable paginator
+ */
+@Component({
+  selector: 'paginator-configurable-example',
+  templateUrl: 'paginator-configurable-example.html',
+  styleUrls: ['paginator-configurable-example.css'],
+})
+export class PaginatorConfigurableExample {
+  // MatPaginator Inputs
+  length = 100;
+  pageSize = 10;
+  pageSizeOptions: number[] = [5, 10, 25, 100];
+
+  // MatPaginator Output
+  pageEvent: PageEvent;
+
+  setPageSizeOptions(setPageSizeOptionsInput: string) {
+    if (setPageSizeOptionsInput) {
+      this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
+    }
+  }
+}
diff --git a/src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.html b/src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.html
new file mode 100644
index 000000000000..0dcd46611ddd
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.html
@@ -0,0 +1,9 @@
+<mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="length"
+    [pageSize]="pageSize"
+    [showFirstLastButtons]="showFirstLastButtons"
+    [pageSizeOptions]="pageSizeOptions"
+    [pageIndex]="pageIndex"
+    aria-label="Select page">
+</mat-paginator>
diff --git a/src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.spec.ts b/src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.spec.ts
new file mode 100644
index 000000000000..2cd85f75caca
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.spec.ts
@@ -0,0 +1,55 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatLegacyPaginatorHarness} from '@angular/material/legacy-paginator/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
+import {PaginatorHarnessExample} from './paginator-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('PaginatorHarnessExample', () => {
+  let fixture: ComponentFixture<PaginatorHarnessExample>;
+  let loader: HarnessLoader;
+  let instance: PaginatorHarnessExample;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatLegacyPaginatorModule, NoopAnimationsModule],
+      declarations: [PaginatorHarnessExample],
+    }).compileComponents();
+    fixture = TestBed.createComponent(PaginatorHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    instance = fixture.componentInstance;
+  });
+
+  it('should load all paginator harnesses', async () => {
+    const paginators = await loader.getAllHarnesses(MatLegacyPaginatorHarness);
+    expect(paginators.length).toBe(1);
+  });
+
+  it('should be able to navigate between pages', async () => {
+    const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
+
+    expect(instance.pageIndex).toBe(0);
+    await paginator.goToNextPage();
+    expect(instance.pageIndex).toBe(1);
+    await paginator.goToPreviousPage();
+    expect(instance.pageIndex).toBe(0);
+  });
+
+  it('should be able to go to the last page', async () => {
+    const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
+
+    expect(instance.pageIndex).toBe(0);
+    await paginator.goToLastPage();
+    expect(instance.pageIndex).toBe(49);
+  });
+
+  it('should be able to set the page size', async () => {
+    const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
+
+    expect(instance.pageSize).toBe(10);
+    await paginator.setPageSize(25);
+    expect(instance.pageSize).toBe(25);
+  });
+});
diff --git a/src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.ts b/src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.ts
new file mode 100644
index 000000000000..1ce7efc4b7de
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.ts
@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {PageEvent} from '@angular/material/legacy-paginator';
+
+/**
+ * @title Testing with MatPaginatorHarness
+ */
+@Component({
+  selector: 'paginator-harness-example',
+  templateUrl: 'paginator-harness-example.html',
+})
+export class PaginatorHarnessExample {
+  length = 500;
+  pageSize = 10;
+  pageIndex = 0;
+  pageSizeOptions = [5, 10, 25];
+  showFirstLastButtons = true;
+
+  handlePageEvent(event: PageEvent) {
+    this.length = event.length;
+    this.pageSize = event.pageSize;
+    this.pageIndex = event.pageIndex;
+  }
+}
diff --git a/src/components-examples/material/legacy-paginator/paginator-intl/paginator-intl-example.html b/src/components-examples/material/legacy-paginator/paginator-intl/paginator-intl-example.html
new file mode 100644
index 000000000000..4477a429b11a
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/paginator-intl/paginator-intl-example.html
@@ -0,0 +1,2 @@
+<mat-paginator [length]="200" [pageSizeOptions]="[10, 50, 100]" aria-label="Select page">
+</mat-paginator>
diff --git a/src/components-examples/material/legacy-paginator/paginator-intl/paginator-intl-example.ts b/src/components-examples/material/legacy-paginator/paginator-intl/paginator-intl-example.ts
new file mode 100644
index 000000000000..a725c101d864
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/paginator-intl/paginator-intl-example.ts
@@ -0,0 +1,43 @@
+import {Component, Injectable, NgModule} from '@angular/core';
+import {MatPaginatorIntl, MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
+import {Subject} from 'rxjs';
+
+@Injectable()
+export class MyCustomPaginatorIntl implements MatPaginatorIntl {
+  changes = new Subject<void>();
+
+  // For internationalization, the `$localize` function from
+  // the `@angular/localize` package can be used.
+  firstPageLabel = $localize`First page`;
+  itemsPerPageLabel = $localize`Items per page:`;
+  lastPageLabel = $localize`Last page`;
+
+  // You can set labels to an arbitrary string too, or dynamically compute
+  // it through other third-party internationalization libraries.
+  nextPageLabel = 'Next page';
+  previousPageLabel = 'Previous page';
+
+  getRangeLabel(page: number, pageSize: number, length: number): string {
+    if (length === 0) {
+      return $localize`Page 1 of 1`;
+    }
+    const amountPages = Math.ceil(length / pageSize);
+    return $localize`Page ${page + 1} of ${amountPages}`;
+  }
+}
+
+/**
+ * @title Paginator internationalization
+ */
+@Component({
+  selector: 'paginator-intl-example',
+  templateUrl: 'paginator-intl-example.html',
+})
+export class PaginatorIntlExample {}
+
+@NgModule({
+  imports: [MatLegacyPaginatorModule],
+  declarations: [PaginatorIntlExample],
+  providers: [{provide: MatPaginatorIntl, useClass: MyCustomPaginatorIntl}],
+})
+export class PaginatorIntlExampleModule {}
diff --git a/src/components-examples/material/legacy-paginator/paginator-overview/paginator-overview-example.html b/src/components-examples/material/legacy-paginator/paginator-overview/paginator-overview-example.html
new file mode 100644
index 000000000000..b39a88289bee
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/paginator-overview/paginator-overview-example.html
@@ -0,0 +1,5 @@
+<mat-paginator [length]="100"
+              [pageSize]="10"
+              [pageSizeOptions]="[5, 10, 25, 100]"
+              aria-label="Select page">
+</mat-paginator>
diff --git a/src/components-examples/material/legacy-paginator/paginator-overview/paginator-overview-example.ts b/src/components-examples/material/legacy-paginator/paginator-overview/paginator-overview-example.ts
new file mode 100644
index 000000000000..b2d305e1646a
--- /dev/null
+++ b/src/components-examples/material/legacy-paginator/paginator-overview/paginator-overview-example.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Paginator
+ */
+@Component({
+  selector: 'paginator-overview-example',
+  templateUrl: 'paginator-overview-example.html',
+})
+export class PaginatorOverviewExample {}
diff --git a/src/components-examples/material/paginator/BUILD.bazel b/src/components-examples/material/paginator/BUILD.bazel
index 4e1e52aa2106..9871f81e760f 100644
--- a/src/components-examples/material/paginator/BUILD.bazel
+++ b/src/components-examples/material/paginator/BUILD.bazel
@@ -16,9 +16,12 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/components-examples/private:localize_types",
-        "//src/material/legacy-input",
-        "//src/material/legacy-paginator",
-        "//src/material/legacy-paginator/testing",
+        "//src/material/card",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/paginator",
+        "//src/material/paginator/testing",
+        "//src/material/slide-toggle",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -42,8 +45,8 @@ ng_test_library(
         ":paginator",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-paginator",
-        "//src/material/legacy-paginator/testing",
+        "//src/material/paginator",
+        "//src/material/paginator/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],
diff --git a/src/components-examples/material/paginator/index.ts b/src/components-examples/material/paginator/index.ts
index 4efbedef8d6e..49d7d9d8374d 100644
--- a/src/components-examples/material/paginator/index.ts
+++ b/src/components-examples/material/paginator/index.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
+import {MatInputModule} from '@angular/material/input';
+import {MatPaginatorModule} from '@angular/material/paginator';
 import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example';
 import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
 import {PaginatorHarnessExample} from './paginator-harness/paginator-harness-example';
@@ -10,6 +10,9 @@ import {
   PaginatorIntlExample,
   PaginatorIntlExampleModule,
 } from './paginator-intl/paginator-intl-example';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 export {
   PaginatorConfigurableExample,
@@ -28,8 +31,12 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyInputModule,
-    MatLegacyPaginatorModule,
+    MatInputModule,
+    MatPaginatorModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSlideToggleModule,
     PaginatorIntlExampleModule,
     FormsModule,
   ],
diff --git a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.css b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.css
index 9cf43ddbc1f3..0b9feb6b1256 100644
--- a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.css
+++ b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.css
@@ -1,3 +1,22 @@
-.mat-form-field {
-  margin-right: 12px;
+.demo-toggles {
+  display: flex;
+  flex-direction: column;
+}
+
+.demo-toggles * {
+  margin-bottom: 16px;
+}
+
+.demo-options {
+  display: flex;
+  flex-direction: column;
+  width: 600px;
+}
+
+.demo-data * {
+  margin: 16px 0;
+}
+
+.demo-paginator {
+  width: 600px;
 }
diff --git a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.html b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.html
index e6ce26b5d8be..187902602f51 100644
--- a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.html
+++ b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.html
@@ -1,28 +1,47 @@
-<mat-form-field appearance="fill">
-  <mat-label>List length</mat-label>
-  <input matInput [(ngModel)]="length" type="number">
-</mat-form-field>
+<div class="demo-options">
+  <mat-form-field>
+    <mat-label>Length</mat-label>
+    <input matInput placeholder="Length" type="number" [(ngModel)]="length">
+  </mat-form-field>
 
-<mat-form-field appearance="fill">
-  <mat-label>Page size</mat-label>
-  <input matInput [(ngModel)]="pageSize" type="number">
-</mat-form-field>
-<mat-form-field appearance="fill">
-  <mat-label>Page size options</mat-label>
-  <input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)"
-         [ngModelOptions]="{updateOn: 'blur'}" placeholder="Ex. 10,25,50">
-</mat-form-field>
+  <mat-form-field>
+    <mat-label>Page Size</mat-label>
+    <input matInput placeholder="Page Size" type="number" [(ngModel)]="pageSize">
+  </mat-form-field>
 
-<mat-paginator [length]="length"
+  <mat-form-field>
+    <mat-label>Page Index</mat-label>
+    <input matInput placeholder="Page Index" type="number" [(ngModel)]="pageIndex">
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Page Size Options</mat-label>
+    <input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)"
+           [ngModelOptions]="{updateOn: 'blur'}" placeholder="Ex. 10,25,50">
+  </mat-form-field>
+
+  <div class="demo-toggles">
+    <mat-slide-toggle [(ngModel)]="hidePageSize">Hide page size</mat-slide-toggle>
+    <mat-slide-toggle [(ngModel)]="showPageSizeOptions">Show multiple page size options</mat-slide-toggle>
+    <mat-slide-toggle [(ngModel)]="showFirstLastButtons">Show first/last buttons</mat-slide-toggle>
+    <mat-slide-toggle [(ngModel)]="disabled">Disabled</mat-slide-toggle>
+  </div>
+</div>
+
+<mat-paginator #paginator
+               class="demo-paginator"
+               (page)="handlePageEvent($event)"
+               [length]="length"
                [pageSize]="pageSize"
-               [pageSizeOptions]="pageSizeOptions"
-               (page)="pageEvent = $event"
+               [disabled]="disabled"
+               [showFirstLastButtons]="showFirstLastButtons"
+               [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
+               [hidePageSize]="hidePageSize"
+               [pageIndex]="pageIndex"
                aria-label="Select page">
 </mat-paginator>
 
-<div *ngIf="pageEvent">
-  <h5>Page Change Event Properties</h5>
-  <div>List length: {{pageEvent.length}}</div>
-  <div>Page size: {{pageEvent.pageSize}}</div>
-  <div>Page index: {{pageEvent.pageIndex}}</div>
+<div class="demo-data">
+  <div> Output event: {{(pageEvent | json) || 'No events dispatched yet'}} </div>
+  <div> getNumberOfPages: {{paginator.getNumberOfPages()}} </div>
 </div>
diff --git a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts
index 6373e7a6f43f..14b3f2798a07 100644
--- a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts
+++ b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {PageEvent} from '@angular/material/legacy-paginator';
+import {PageEvent} from '@angular/material/paginator';
 
 /**
  * @title Configurable paginator
@@ -10,14 +10,25 @@ import {PageEvent} from '@angular/material/legacy-paginator';
   styleUrls: ['paginator-configurable-example.css'],
 })
 export class PaginatorConfigurableExample {
-  // MatPaginator Inputs
-  length = 100;
+  length = 50;
   pageSize = 10;
-  pageSizeOptions: number[] = [5, 10, 25, 100];
+  pageIndex = 0;
+  pageSizeOptions = [5, 10, 25];
+
+  hidePageSize = false;
+  showPageSizeOptions = true;
+  showFirstLastButtons = true;
+  disabled = false;
 
-  // MatPaginator Output
   pageEvent: PageEvent;
 
+  handlePageEvent(e: PageEvent) {
+    this.pageEvent = e;
+    this.length = e.length;
+    this.pageSize = e.pageSize;
+    this.pageIndex = e.pageIndex;
+  }
+
   setPageSizeOptions(setPageSizeOptionsInput: string) {
     if (setPageSizeOptionsInput) {
       this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
diff --git a/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts b/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts
index 2cd85f75caca..cd4da36067f3 100644
--- a/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts
+++ b/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts
@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatLegacyPaginatorHarness} from '@angular/material/legacy-paginator/testing';
+import {MatPaginatorHarness} from '@angular/material/paginator/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
+import {MatPaginatorModule} from '@angular/material/paginator';
 import {PaginatorHarnessExample} from './paginator-harness-example';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -13,7 +13,7 @@ describe('PaginatorHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacyPaginatorModule, NoopAnimationsModule],
+      imports: [MatPaginatorModule, NoopAnimationsModule],
       declarations: [PaginatorHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(PaginatorHarnessExample);
@@ -23,12 +23,12 @@ describe('PaginatorHarnessExample', () => {
   });
 
   it('should load all paginator harnesses', async () => {
-    const paginators = await loader.getAllHarnesses(MatLegacyPaginatorHarness);
+    const paginators = await loader.getAllHarnesses(MatPaginatorHarness);
     expect(paginators.length).toBe(1);
   });
 
   it('should be able to navigate between pages', async () => {
-    const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
+    const paginator = await loader.getHarness(MatPaginatorHarness);
 
     expect(instance.pageIndex).toBe(0);
     await paginator.goToNextPage();
@@ -38,7 +38,7 @@ describe('PaginatorHarnessExample', () => {
   });
 
   it('should be able to go to the last page', async () => {
-    const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
+    const paginator = await loader.getHarness(MatPaginatorHarness);
 
     expect(instance.pageIndex).toBe(0);
     await paginator.goToLastPage();
@@ -46,7 +46,7 @@ describe('PaginatorHarnessExample', () => {
   });
 
   it('should be able to set the page size', async () => {
-    const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
+    const paginator = await loader.getHarness(MatPaginatorHarness);
 
     expect(instance.pageSize).toBe(10);
     await paginator.setPageSize(25);
diff --git a/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.ts b/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.ts
index 1ce7efc4b7de..f575218037db 100644
--- a/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.ts
+++ b/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {PageEvent} from '@angular/material/legacy-paginator';
+import {PageEvent} from '@angular/material/paginator';
 
 /**
  * @title Testing with MatPaginatorHarness
diff --git a/src/components-examples/material/paginator/paginator-intl/paginator-intl-example.ts b/src/components-examples/material/paginator/paginator-intl/paginator-intl-example.ts
index a725c101d864..f3eca4c287ec 100644
--- a/src/components-examples/material/paginator/paginator-intl/paginator-intl-example.ts
+++ b/src/components-examples/material/paginator/paginator-intl/paginator-intl-example.ts
@@ -1,5 +1,5 @@
 import {Component, Injectable, NgModule} from '@angular/core';
-import {MatPaginatorIntl, MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
+import {MatPaginatorIntl, MatPaginatorModule} from '@angular/material/paginator';
 import {Subject} from 'rxjs';
 
 @Injectable()
@@ -36,7 +36,7 @@ export class MyCustomPaginatorIntl implements MatPaginatorIntl {
 export class PaginatorIntlExample {}
 
 @NgModule({
-  imports: [MatLegacyPaginatorModule],
+  imports: [MatPaginatorModule],
   declarations: [PaginatorIntlExample],
   providers: [{provide: MatPaginatorIntl, useClass: MyCustomPaginatorIntl}],
 })
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index fa6600edef2f..cf6e7cee5804 100644
--- a/src/dev-app/BUILD.bazel
+++ b/src/dev-app/BUILD.bazel
@@ -49,6 +49,7 @@ ng_module(
         "//src/dev-app/layout",
         "//src/dev-app/legacy-table",
         "//src/dev-app/legacy-tooltip",
+        "//src/dev-app/legacy-paginator",
         "//src/dev-app/list",
         "//src/dev-app/live-announcer",
         "//src/dev-app/mdc-autocomplete",
@@ -60,7 +61,6 @@ ng_module(
         "//src/dev-app/mdc-input",
         "//src/dev-app/mdc-list",
         "//src/dev-app/mdc-menu",
-        "//src/dev-app/mdc-paginator",
         "//src/dev-app/mdc-progress-bar",
         "//src/dev-app/mdc-progress-spinner",
         "//src/dev-app/mdc-radio",
diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index fadc3db38cb3..e8c0d6bf25d0 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/src/dev-app/dev-app/dev-app-layout.ts
@@ -113,7 +113,7 @@ export class DevAppLayout {
     {name: 'MDC List', route: '/mdc-list'},
     {name: 'MDC Menu', route: '/mdc-menu'},
     {name: 'MDC Radio', route: '/mdc-radio'},
-    {name: 'MDC Paginator', route: '/mdc-paginator'},
+    {name: 'Legacy Paginator', route: '/legacy-paginator'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
     {name: 'MDC Tabs', route: '/mdc-tabs'},
diff --git a/src/dev-app/legacy-paginator/BUILD.bazel b/src/dev-app/legacy-paginator/BUILD.bazel
new file mode 100644
index 000000000000..6e66aba9b44a
--- /dev/null
+++ b/src/dev-app/legacy-paginator/BUILD.bazel
@@ -0,0 +1,25 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-paginator",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "paginator-demo.html",
+        ":paginator_demo_scss",
+    ],
+    deps = [
+        "//src/material/legacy-card",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-input",
+        "//src/material/legacy-paginator",
+        "//src/material/legacy-slide-toggle",
+        "@npm//@angular/forms",
+    ],
+)
+
+sass_binary(
+    name = "paginator_demo_scss",
+    src = "paginator-demo.scss",
+)
diff --git a/src/dev-app/mdc-paginator/mdc-paginator-demo.html b/src/dev-app/legacy-paginator/paginator-demo.html
similarity index 81%
rename from src/dev-app/mdc-paginator/mdc-paginator-demo.html
rename to src/dev-app/legacy-paginator/paginator-demo.html
index 4859ac850b90..77bb73ea92b0 100644
--- a/src/dev-app/mdc-paginator/mdc-paginator-demo.html
+++ b/src/dev-app/legacy-paginator/paginator-demo.html
@@ -6,18 +6,15 @@ <h2>No inputs</h2>
 <mat-card class="demo-section">
   <div class="demo-options">
     <mat-form-field>
-      <mat-label>Length</mat-label>
-      <input matInput type="number" [(ngModel)]="length">
+      <input matInput placeholder="Length" type="number" [(ngModel)]="length">
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>Page Size</mat-label>
-      <input matInput type="number" [(ngModel)]="pageSize">
+      <input matInput placeholder="Page Size" type="number" [(ngModel)]="pageSize">
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>Page Index</mat-label>
-      <input matInput type="number" [(ngModel)]="pageIndex">
+      <input matInput placeholder="Page Index" type="number" [(ngModel)]="pageIndex">
     </mat-form-field>
 
     <mat-slide-toggle [(ngModel)]="hidePageSize">Hide page size</mat-slide-toggle>
diff --git a/src/dev-app/mdc-paginator/mdc-paginator-demo.scss b/src/dev-app/legacy-paginator/paginator-demo.scss
similarity index 67%
rename from src/dev-app/mdc-paginator/mdc-paginator-demo.scss
rename to src/dev-app/legacy-paginator/paginator-demo.scss
index 32628c37915e..f0804fe3547e 100644
--- a/src/dev-app/mdc-paginator/mdc-paginator-demo.scss
+++ b/src/dev-app/legacy-paginator/paginator-demo.scss
@@ -1,7 +1,6 @@
 .demo-section {
-  max-width: 600px;
+  max-width: 500px;
   margin-bottom: 24px;
-  padding: 16px;
   background: #efefef !important;
 
   & > * {
@@ -13,8 +12,4 @@
   display: flex;
   flex-direction: column;
   max-width: 300px;
-
-  .mat-mdc-slide-toggle {
-    margin-bottom: 8px;
-  }
 }
diff --git a/src/dev-app/mdc-paginator/mdc-paginator-demo.ts b/src/dev-app/legacy-paginator/paginator-demo.ts
similarity index 54%
rename from src/dev-app/mdc-paginator/mdc-paginator-demo.ts
rename to src/dev-app/legacy-paginator/paginator-demo.ts
index 47b4c2957f25..8f3e47511157 100644
--- a/src/dev-app/mdc-paginator/mdc-paginator-demo.ts
+++ b/src/dev-app/legacy-paginator/paginator-demo.ts
@@ -7,28 +7,30 @@
  */
 
 import {Component} from '@angular/core';
+import {MatLegacyPaginatorModule, PageEvent} from '@angular/material/legacy-paginator';
 import {CommonModule} from '@angular/common';
-import {MatPaginatorModule, PageEvent} from '@angular/material/paginator';
 import {FormsModule} from '@angular/forms';
-import {MatCardModule} from '@angular/material/card';
-import {MatInputModule} from '@angular/material/input';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
 
 @Component({
-  selector: 'mdc-paginator-demo',
-  templateUrl: 'mdc-paginator-demo.html',
-  styleUrls: ['mdc-paginator-demo.css'],
+  selector: 'paginator-demo',
+  templateUrl: 'paginator-demo.html',
+  styleUrls: ['paginator-demo.css'],
   standalone: true,
   imports: [
     CommonModule,
     FormsModule,
-    MatCardModule,
-    MatInputModule,
-    MatPaginatorModule,
-    MatSlideToggleModule,
+    MatLegacyCardModule,
+    MatLegacyFormFieldModule,
+    MatLegacyInputModule,
+    MatLegacyPaginatorModule,
+    MatLegacySlideToggleModule,
   ],
 })
-export class MdcPaginatorDemo {
+export class LegacyPaginatorDemo {
   length = 50;
   pageSize = 10;
   pageIndex = 0;
diff --git a/src/dev-app/mdc-paginator/BUILD.bazel b/src/dev-app/mdc-paginator/BUILD.bazel
deleted file mode 100644
index 619b6cba9e97..000000000000
--- a/src/dev-app/mdc-paginator/BUILD.bazel
+++ /dev/null
@@ -1,25 +0,0 @@
-load("//tools:defaults.bzl", "ng_module", "sass_binary")
-
-package(default_visibility = ["//visibility:public"])
-
-ng_module(
-    name = "mdc-paginator",
-    srcs = glob(["**/*.ts"]),
-    assets = [
-        "mdc-paginator-demo.html",
-        ":mdc_paginator_demo_scss",
-    ],
-    deps = [
-        "//src/material/card",
-        "//src/material/form-field",
-        "//src/material/input",
-        "//src/material/paginator",
-        "//src/material/slide-toggle",
-        "@npm//@angular/forms",
-    ],
-)
-
-sass_binary(
-    name = "mdc_paginator_demo_scss",
-    src = "mdc-paginator-demo.scss",
-)
diff --git a/src/dev-app/paginator/BUILD.bazel b/src/dev-app/paginator/BUILD.bazel
index 483d4828ec23..ce561bf433fa 100644
--- a/src/dev-app/paginator/BUILD.bazel
+++ b/src/dev-app/paginator/BUILD.bazel
@@ -10,11 +10,12 @@ ng_module(
         ":paginator_demo_scss",
     ],
     deps = [
-        "//src/material/legacy-card",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
-        "//src/material/legacy-paginator",
-        "//src/material/legacy-slide-toggle",
+        "//src/components-examples/material/paginator",
+        "//src/material/card",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/paginator",
+        "//src/material/slide-toggle",
         "@npm//@angular/forms",
     ],
 )
diff --git a/src/dev-app/paginator/paginator-demo.html b/src/dev-app/paginator/paginator-demo.html
index 77bb73ea92b0..fcd8bcaa5f85 100644
--- a/src/dev-app/paginator/paginator-demo.html
+++ b/src/dev-app/paginator/paginator-demo.html
@@ -1,40 +1,5 @@
-<mat-card class="demo-section">
-  <h2>No inputs</h2>
-  <mat-paginator aria-label="Select page"></mat-paginator>
-</mat-card>
+<h3>Paginator overview</h3>
+<paginator-overview-example></paginator-overview-example>
 
-<mat-card class="demo-section">
-  <div class="demo-options">
-    <mat-form-field>
-      <input matInput placeholder="Length" type="number" [(ngModel)]="length">
-    </mat-form-field>
-
-    <mat-form-field>
-      <input matInput placeholder="Page Size" type="number" [(ngModel)]="pageSize">
-    </mat-form-field>
-
-    <mat-form-field>
-      <input matInput placeholder="Page Index" type="number" [(ngModel)]="pageIndex">
-    </mat-form-field>
-
-    <mat-slide-toggle [(ngModel)]="hidePageSize">Hide page size</mat-slide-toggle>
-    <mat-slide-toggle [(ngModel)]="showPageSizeOptions">Show multiple page size options</mat-slide-toggle>
-    <mat-slide-toggle [(ngModel)]="showFirstLastButtons">Show first/last buttons</mat-slide-toggle>
-    <mat-slide-toggle [(ngModel)]="disabled">Disabled</mat-slide-toggle>
-  </div>
-
-  <mat-paginator #paginator
-                 (page)="handlePageEvent($event)"
-                 [length]="length"
-                 [pageSize]="pageSize"
-                 [disabled]="disabled"
-                 [showFirstLastButtons]="showFirstLastButtons"
-                 [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
-                 [hidePageSize]="hidePageSize"
-                 [pageIndex]="pageIndex"
-                 aria-label="Select page">
-  </mat-paginator>
-
-  <div> Output event: {{pageEvent | json}} </div>
-  <div> getNumberOfPages: {{paginator.getNumberOfPages()}} </div>
-</mat-card>
+<h3>Configurable paginator</h3>
+<paginator-configurable-example></paginator-configurable-example>
diff --git a/src/dev-app/paginator/paginator-demo.ts b/src/dev-app/paginator/paginator-demo.ts
index 433080a00779..7aa66a0bf95e 100644
--- a/src/dev-app/paginator/paginator-demo.ts
+++ b/src/dev-app/paginator/paginator-demo.ts
@@ -7,13 +7,14 @@
  */
 
 import {Component} from '@angular/core';
-import {MatLegacyPaginatorModule, PageEvent} from '@angular/material/legacy-paginator';
+import {MatPaginatorModule, PageEvent} from '@angular/material/paginator';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {PaginatorExamplesModule} from '@angular/components-examples/material/paginator';
 
 @Component({
   selector: 'paginator-demo',
@@ -23,11 +24,12 @@ import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle'
   imports: [
     CommonModule,
     FormsModule,
-    MatLegacyCardModule,
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
-    MatLegacyPaginatorModule,
-    MatLegacySlideToggleModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSlideToggleModule,
+    MatPaginatorModule,
+    PaginatorExamplesModule,
   ],
 })
 export class PaginatorDemo {
diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts
index 80b0ef88d613..09a5d0c5ebac 100644
--- a/src/dev-app/routes.ts
+++ b/src/dev-app/routes.ts
@@ -184,8 +184,9 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./mdc-menu/mdc-menu-demo').then(m => m.MdcMenuDemo),
   },
   {
-    path: 'mdc-paginator',
-    loadComponent: () => import('./mdc-paginator/mdc-paginator-demo').then(m => m.MdcPaginatorDemo),
+    path: 'legacy-paginator',
+    loadComponent: () =>
+      import('./legacy-paginator/paginator-demo').then(m => m.LegacyPaginatorDemo),
   },
   {
     path: 'mdc-progress-spinner',