---
title: "App Launcher"
description: "The Apps popout, with search, a recents strip and the apps installed in a server."
---

The Apps popout, with search, a recents strip and the apps installed in a server. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of App Launcher — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add app-launcher
```

Files written — React: components/ui/app-launcher.tsx. Vue: components/ui/app-launcher/AppLauncher.vue, components/ui/app-launcher/AppLauncherHandle.vue, components/ui/app-launcher/AppLauncherHeader.vue, components/ui/app-launcher/AppLauncherBack.vue, components/ui/app-launcher/AppLauncherSearch.vue, components/ui/app-launcher/AppLauncherSearchInput.vue, components/ui/app-launcher/AppLauncherBody.vue, components/ui/app-launcher/AppLauncherSection.vue, components/ui/app-launcher/AppLauncherSectionHeader.vue, components/ui/app-launcher/AppLauncherSectionTitle.vue, components/ui/app-launcher/AppLauncherViewMore.vue, components/ui/app-launcher/AppLauncherList.vue, components/ui/app-launcher/AppLauncherItem.vue, components/ui/app-launcher/AppLauncherItemIcon.vue, components/ui/app-launcher/AppLauncherRecents.vue, components/ui/app-launcher/AppLauncherRecent.vue, components/ui/app-launcher/index.ts.

## Usage

React:

```tsx
import { AppLauncher } from "@/components/ui/app-launcher"
```

Vue:

```ts
import { AppLauncher, AppLauncherHandle, AppLauncherHeader, AppLauncherBack, AppLauncherSearch, AppLauncherSearchInput, AppLauncherBody, AppLauncherSection, AppLauncherSectionHeader, AppLauncherSectionTitle, AppLauncherViewMore, AppLauncherList, AppLauncherItem, AppLauncherItemIcon, AppLauncherRecents, AppLauncherRecent } from "@/components/ui/app-launcher"
```

## API reference

**`AppLauncherItem`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | — | Required name value. |
| `description` | `string \| undefined` | — | Optional description value. |
| `icon` | `React.ReactNode \| undefined` | — | Icon for the app; pair with `<AppLauncherItemIcon>`. |
| `promoted` | `boolean \| undefined` | — | Marks a paid placement, as the client does for promoted apps. |

**`AppLauncherItemIcon`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `round` | `boolean \| undefined` | — | Bots use circular avatars; games and activities keep the squircle. |

The registry exports `AppLauncher`, `AppLauncherHandle`, `AppLauncherHeader`, `AppLauncherBack`, `AppLauncherSearch`, `AppLauncherSearchInput`, `AppLauncherBody`, `AppLauncherSection`, `AppLauncherSectionHeader`, `AppLauncherSectionTitle`, `AppLauncherViewMore`, `AppLauncherList`, `AppLauncherItem`, `AppLauncherItemIcon`, `AppLauncherRecents`, `AppLauncherRecent`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Give the launcher an accessible heading, keep search labelled, and expose the active item while keyboard focus moves through the results.

## Tokens

App Launcher reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.