dx-components

What

Four self-contained React components that fill gaps every Vite + TanStack app hits:

Component	Purpose
ErrorComponent	Dev-friendly error overlay with parsed stack traces, chained cause display, and copy-to-clipboard
ErrorPage	Clean, production-facing error page — shown automatically by ErrorComponent in prod
NotFoundComponent	404 page template with a “Go home” link
PendingComponent	Animated “Loading…” skeleton for route transitions

Each is a single .tsx file with its own <style> block. No CSS imports, no build plugins, no runtime dependency beyond React.

Why

Next.js ships with decent error boundaries, custom 404 pages, and built-in <Suspense> boundaries — and has dedicated documentation, examples, and convention for each.

With Vite + TanStack Start, you’re wiring all of this up from scratch. These components fill that gap.

They’re delivered the same way shadcn ships UI components: the source code is the package. Copy the files from GitHub, or npm install and import them directly. You own the code, you edit the code — nothing is hidden behind a bundler or abstraction layer.

How

# Copy-paste from the GitHub repo
# Or install as a package:
npm install github:las6/dx-components

import { ErrorComponent } from "dx-components/components/ErrorComponent";

export const Route = createRootRoute({
  errorComponent: ErrorComponent,
});

Each component works within TanStack Router, TanStack Start, or any React app using Vite.

Browse the components or head to the installation guide for setup.