Device

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { Device, Dock, FolderShelf } from "@sushindustries/ui";

export function Home() {
	return (
		<Device
			title="sushindustries"
			wallpaper={<span className="desk-glow" />}
			dock={<Dock tasks={openTasks} onSearch={openSearch} />}
		>
			<FolderShelf entries={FOLDERS} label="Packages" actionsFor={actionsFor} />
		</Device>
	);
}

What this example is not

Not a component that knows what a folder or a dock is. DeviceDeviceA phone, a tablet or a laptop in CSS 3D, chosen by the stylesheet rather than by JavaScript, whose screen is a real scroll container with real controls in it.@sushindustries/ui · layout only offers the screen, the strip, and the dock slot - FolderShelf and DockDockA launcher, what is open, and a corner. Search opens upward and results are the consumer's to compute.@sushindustries/ui · layout are separate components that happen to be the ones this site puts inside it.