Patterns
App launcher
The switch-app button. The dots fold into a × while open; arrow keys move by tile or row; it opens on the app you are in.
A Wavi Pro component
The live example is open to everyone. The source comes with a Wavi Pro licence: add it with one command, or copy it below.
grid · Default — up to nine apps
list · When names need a line
spotlight · A suite's front door
glass · Over maps, photos, heroes
dark · Glow in each app's colour
trigger="chip" · the app you are in, by name
The example code comes with Wavi Pro
One payment for every Pro component, block and template, with every update.
Import#
The package for everything else, and the Pro component from where `add` puts it:
import { Badge } from "@waveinno/ui";
import { AppLauncher, type AppLauncherVariant, type LauncherApp } from "@/components/wavi-pro/app-launcher";Props#
Read from the source of this version, so they match the code exactly.
<AppLauncher>
pro/app-launcher.tsx| Prop | Type | Default | Description |
|---|---|---|---|
appsrequired | LauncherApp[] | — | |
current | string | — | The `id` of the app the person is in. |
onSelect | (app: LauncherApp) => void | — | |
variant | "grid" | "list" | "spotlight" | "glass" | "dark" | "grid" | |
trigger | "icon" | "chip" | "icon" | `icon`: the dots alone (headers). `chip`: the current app's tile and name beside them. |
title | React.ReactNode | "Apps" | |
action | React.ReactNode | — | Top right of the panel: "Manage", a settings link. |
footer | React.ReactNode | — | Under the apps: "All products", a link to the marketplace. |
align | "start" | "center" | "end" | "end" | |
side | "top" | "right" | "bottom" | "left" | "bottom" | |
open | boolean | — | |
onOpenChange | (open: boolean) => void | — | |
className | string | — |
<Badge>
src/components/ui/badge.tsx| Prop | Type | Default | Description |
|---|---|---|---|
dot | boolean | true | |
variant | "soft" | "solid" | "outline" | "dot" | "gradient" | "live" | "soft" |
Also takes HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>.
Add it to your project#
With your licence key, this writes the component to components/wavi-pro/ and installs anything it needs:
$ npx @waveinno/ui add app-launcher --key <your licence key>Source#
Or copy the file yourself. It imports only from @waveinno/ui, lucide-react and React (and Radix where noted).
The source comes with Wavi Pro
One payment for every Pro component, block and template, with every update.
Install#
If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.
$ npm install @waveinno/ui