Database Schema Explorer

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools20.tsx instead.

Usage

The file also exports devtools20Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools20, devtools20Demo } from "@/components/blocks/devtools/devtools20";

export default function Page() {
  return <Devtools20 {...devtools20Demo} />;
}

Props

Types

type TableColumn = {
  name: string;
  type: string;
  nullable: boolean;
  key?: "PK" | "FK";
};

type DatabaseTable = {
  id: string;
  name: string;
  rowCount: string;
  columns: TableColumn[];
};

Behavior notes

• Table expand/collapse is real local state (a Set of expanded table ids) seeded once from defaultExpandedIds; it does not query any real database, it only reveals the static columns already supplied for that table.
• rowCount is a plain caller-supplied string (e.g. "8,204 rows"); the component does not count rows or connect to any data source.
• PK/FK badges are decorative labels driven by each column's key field; there is no foreign-key relationship diagram or click-through to the referenced table.
• Tables render in the order given with no reordering, search, or filtering.