Ready

Splash screen displayed when no <Resource> is configured under <Admin>. Renders a welcome panel with links to documentation, the live demo, and the GitHub repository, so new developers see a non-empty page on their first run.

Installation

pnpm dlx shadcn@latest add @shadmin/ready

Usage

<Admin> renders <Ready> automatically when it has no <Resource> children. To swap in your own placeholder, pass a component to the ready prop:

import { Admin } from "@/components/admin";
import { Ready } from "@/components/admin/ready";
 
const App = () => (
  <Admin dataProvider={dataProvider} ready={Ready}>
    {/* no <Resource> yet — shows <Ready> */}
  </Admin>
);

To replace it with a custom splash:

import { Admin } from "@/components/admin";
 
const MyReady = () => (
  <div className="p-8 text-center">
    <h1 className="text-2xl">Welcome to my admin</h1>
    <p>Add a Resource to get started.</p>
  </div>
);
 
const App = () => <Admin dataProvider={dataProvider} ready={MyReady} />;

<Ready> takes no props.