Dock

@sushindustries/ui

A launcher, what is open, and a corner. Search opens in the middle of the screen.

7 min read
View as MarkdownEdit on GitHub
Viewport width
Phone22remthe floor, the narrowest this promises to work at
tanstacktanstack add https://adamjurek.com/r/tanstack/dock.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/dock.json

Three parts

PartIs
The search controla pill with a magnifier. It opens a window on the desk
The tasksone button per open window; pressing one raises it
The cornerwhatever the consumer puts there. On this site: a reset, a LinkedIn link and a clock

It has no state

Every version of this that held its own open flag, its own query and its own results grew a second way to do something the desk already did. What is left is a row of buttons and three callbacks: raise this, close this, open search.

Install

tanstack add https://adamjurek.com/r/tanstack/dock.json
shell
pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/dock.json
shell
pnpm add @sushindustries/ui @sushindustries/atoms
shell

What you get

Version0.1.0
Categorylayout · Page structure
Filesdock.tsx
DependenciesNone
Also installsiconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content
Tagsblock, navigation, search, no-js, no-deps

No runtime dependencies

It brings nothing with it beyond the stylesheet.

UsesIconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content
Mentioned inDeviceFolder Shelf