DesktopIconGrid

Code

import { DesktopShell, DesktopIconGrid } from "@fadymondy/nasaq/web";export function Desktop({ apps }: { apps: { id: string; title: string; icon: React.ReactNode }[] }) {  return (    <DesktopShell apps={apps}>      {({ open }) => <DesktopIconGrid items={apps} onOpen={(item) => open(item.id)} />}    </DesktopShell>  );}

Apps & Platforms · beta

Live examples and controls: DesktopIconGrid in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/desktop-icons.json

Shortcuts on a desktop: apps, files or folders, each an icon with a label. Without onMove the icons flow into a grid. With onMove they can be dragged anywhere and snap to cells; you keep the positions.

When to useCopy Anchor Link

• The desktop area of a DesktopShell, or any web OS surface with launchable items.
• A "drop files here" desktop where people arrange their own items.

When not to useCopy Anchor Link

• A list of apps in a menu or a launcher: use CommandPalette or Spotlight.
• A file browser with columns and sorting: use a DataTable.

ImportCopy Anchor Link

import { DesktopIconGrid } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { DesktopShell, DesktopIconGrid } from "@fadymondy/nasaq/web";

export function Desktop({ apps }: { apps: { id: string; title: string; icon: React.ReactNode }[] }) {
  return (
    <DesktopShell apps={apps}>
      {({ open }) => <DesktopIconGrid items={apps} onOpen={(item) => open(item.id)} />}
    </DesktopShell>
  );
}

AnatomyCopy Anchor Link

DesktopIconGrid            data-slot="desktop-icon-grid"  role="group"  data-free in free mode
└─ DesktopIcon             data-slot="desktop-icon"  <button aria-pressed>  (one per item)
   ├─ icon                 aria-hidden
   └─ label                two lines, then clamped

APICopy Anchor Link

div props plus:

desktopIconSlot(index, height) returns the {x, y} of a grid cell, for laying out saved positions.

AccessibilityCopy Anchor Link

• The grid is a labelled group of buttons; each icon is named by its title and aria-pressed shows the selection. Arrow keys move, Enter or Space opens, Escape clears.
• The context menu opens from the keyboard too (Shift+F10 or the Menu key) and its actions are never the only way to do something.
• Dragging starts after 5px, so a click is never a drag. There is no drag-only action.

RTL & i18nCopy Anchor Link

• Arrow keys and free positions follow the reading direction: x is measured from the inline start.
• English and Arabic labels are built in.

Styling & tokensCopy Anchor Link

• Selection is a primary tint and ring; labels sit on a bg-background/70 plate so they read on any wallpaper. No shadows.

Do / Don'tCopy Anchor Link

• Do save positions per user, so the desktop looks the same next time.
• Don't put more than a few dozen icons on one desktop. Group them in a folder.

RelatedCopy Anchor Link

• desktop-os-shell
• context-menu
• desktop-locations

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-apps-platforms-desktop-icons--docs