Admin launcher

The admin home grid: search filters and highlights sections, arrow keys slide a focus ring between tiles, and a cursor spotlight follows the pointer across each tile.

TypeScript Source with Startup & Business plans Light & dark

Admin

Everything you run, one keystroke away.

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { AdminLauncher } from '@/components/component-kit/items/block-admin-launcher';
2
3export function Example() {
4  return <AdminLauncher onNavigate={(destination) => console.log(destination.id)} />;
5}

Props

Admin launcher properties
Prop	Type	Default	Description
`destinations`	`AdminDestination[]`	`8 admin sections`	Tiles with id, title, description, a lucide icon, an optional badge count and search keywords.
`onNavigate`	`(destination: AdminDestination) => void`	`undefined`	Called when a tile is clicked or Enter is pressed in search.
`compact`	`boolean`	`false`	Four tiles without search, for small previews.
`autoPlay`	`boolean`	`false`	Walk the focus ring across tiles on a loop.

1import { AdminLauncher } from '@/components/component-kit/items/block-admin-launcher'; 2 3export function Example() { 4 return <AdminLauncher onNavigate={(destination) => console.log(destination.id)} />; 5}

Props

Admin launcher properties
Prop	Type	Default	Description
`destinations`	`AdminDestination[]`	`8 admin sections`	Tiles with id, title, description, a lucide icon, an optional badge count and search keywords.
`onNavigate`	`(destination: AdminDestination) => void`	`undefined`	Called when a tile is clicked or Enter is pressed in search.
`compact`	`boolean`	`false`	Four tiles without search, for small previews.
`autoPlay`	`boolean`	`false`	Walk the focus ring across tiles on a loop.

Props

Admin launcher properties
Prop	Type	Default	Description
`destinations`	`AdminDestination[]`	`8 admin sections`	Tiles with id, title, description, a lucide icon, an optional badge count and search keywords.
`onNavigate`	`(destination: AdminDestination) => void`	`undefined`	Called when a tile is clicked or Enter is pressed in search.
`compact`	`boolean`	`false`	Four tiles without search, for small previews.
`autoPlay`	`boolean`	`false`	Walk the focus ring across tiles on a loop.

Admin launcher

The admin home grid: search filters and highlights sections, arrow keys slide a focus ring between tiles, and a cursor spotlight follows the pointer across each tile.

TypeScript Source with Startup & Business plans Light & dark

Admin

Everything you run, one keystroke away.

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { AdminLauncher } from '@/components/component-kit/items/block-admin-launcher';
2
3export function Example() {
4  return <AdminLauncher onNavigate={(destination) => console.log(destination.id)} />;
5}

Props

Admin launcher properties
Prop	Type	Default	Description
`destinations`	`AdminDestination[]`	`8 admin sections`	Tiles with id, title, description, a lucide icon, an optional badge count and search keywords.
`onNavigate`	`(destination: AdminDestination) => void`	`undefined`	Called when a tile is clicked or Enter is pressed in search.
`compact`	`boolean`	`false`	Four tiles without search, for small previews.
`autoPlay`	`boolean`	`false`	Walk the focus ring across tiles on a loop.