Launchpad

FreeNew

A full-screen app launcher overlay with a search field, paged app grid and page dots.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

open

cellWidth120

cellHeight112

label

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/launchpad.json

Usage

import { Launchpad, type LaunchpadApp } from "@/components/ui/launchpad"

<div className="relative h-[480px]">
  <button onClick={() => setOpen(true)}>Open launcher</button>
  <Launchpad
    apps={apps}
    open={open}
    onClose={() => setOpen(false)}
    onLaunch={(app) => console.log(app.name)}
  />
</div>

Props

Launchpad

Prop	Type	Default	Description
`apps`	`LaunchpadApp[]`	-	Apps to show, in order. Each has `id`, `name` and `icon`.
`open`	`boolean`	-	Whether the launcher is showing.
`onClose`	`() => void`	-	Called on Escape or a click on the empty background.
`onLaunch`	`(app: LaunchpadApp) => void`	-	Called when an app is chosen.
`cellWidth`	`number`	`120`	Width of one app cell in px.
`cellHeight`	`number`	`112`	Height of one app cell in px.
`label`	`string`	`"App launcher"`	Accessible name of the dialog.

Also accepts all <div> props. It fills its positioned parent.

Keyboard

Typing in the search field filters apps; Enter launches the first match and Down moves into the grid.
Arrow keys move between apps and across pages (mirrored in RTL). Home and End jump to the first and last app.
PageUp, PageDown or Ctrl + Left/Right turn pages. Escape closes.

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/launchpad.json

Usage

import { Launchpad, type LaunchpadApp } from "@/components/ui/launchpad"

<div className="relative h-[480px]">
  <button onClick={() => setOpen(true)}>Open launcher</button>
  <Launchpad
    apps={apps}
    open={open}
    onClose={() => setOpen(false)}
    onLaunch={(app) => console.log(app.name)}
  />
</div>

Props

Launchpad

Prop	Type	Default	Description
`apps`	`LaunchpadApp[]`	-	Apps to show, in order. Each has `id`, `name` and `icon`.
`open`	`boolean`	-	Whether the launcher is showing.
`onClose`	`() => void`	-	Called on Escape or a click on the empty background.
`onLaunch`	`(app: LaunchpadApp) => void`	-	Called when an app is chosen.
`cellWidth`	`number`	`120`	Width of one app cell in px.
`cellHeight`	`number`	`112`	Height of one app cell in px.
`label`	`string`	`"App launcher"`	Accessible name of the dialog.

Also accepts all <div> props. It fills its positioned parent.

Keyboard

Typing in the search field filters apps; Enter launches the first match and Down moves into the grid.
Arrow keys move between apps and across pages (mirrored in RTL). Home and End jump to the first and last app.
PageUp, PageDown or Ctrl + Left/Right turn pages. Escape closes.