SplashScreen

App

Full-screen overlay shown during app initialisation. Accepts a logo slot, optional progress bar, and fades out when visible=false.

Preview

Acme

Loading your workspace…

Code

<SplashScreen
  visible={true}
  logo={<span className="text-4xl font-black text-primary">Acme</span>}
  message="Loading your workspace…"
  progress={65}
/>

Preview

Please wait…

Code

<SplashScreen visible={true} message="Please wait…" />

Preview

App content here

Acme

Starting up…

Code

const [visible, setVisible] = useState(true);

<SplashScreen
  visible={visible}
  logo={<span className="text-4xl font-black text-primary">Acme</span>}
  message="Starting up…"
/>
<Button onClick={() => setVisible(false)}>Dismiss</Button>

SplashScreen

Logo + message + progress

Spinner only (no logo)

Interactive fade-out

Navigation