Showcase
@sushindustries/uiA component at every width it has to survive, with its source, install commands, and a live StackBlitz editor.
The frame below is the component this page documents, showing another component. Switch the width - the layout changes because the preview really is a different viewport.
tanstacktanstack add https://adamjurek.com/r/tanstack/card.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/card.jsonWhy an iframe
Because a resized div lies.
A div at 390px still inherits the page's viewport, so @media (max-width: 860px)
never fires inside it. A component can look perfect in a showcase built that way
and break on an actual phone. An iframe has its own viewport, so the media
queries that run are the real ones.
What else it shows
| Control | Does |
|---|---|
| Preview / Code / StackBlitz | the running component, the source, or a live editor |
| Install rows | the TanStack and shadcn commands, attached automatically |
Install commands are not written by hand
Anything in the registry gets its commands attached from its registry entry, so "how do I get this" is never something an author has to remember.
Install
tanstack add https://adamjurek.com/r/tanstack/showcase.jsonpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/showcase.jsonpnpm add @sushindustries/ui @sushindustries/atomsWhat you get
| Version | 0.1.0 |
| Category | docs · Presentation |
| Files | showcase.tsx |
| Dependencies | None |
| Also installs | iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content, copy-buttonCopy ButtonA glass chip that writes to the clipboard and confirms in the button itself, then hands back.@sushindustries/ui · content, 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, use-device-kinduseDeviceKindWhich machine the stylesheet is currently drawing, as a value. Null until mounted, on purpose - a default would be a claim the server cannot support.@sushindustries/ui · layout |
| Tags | iframe, responsive |
No runtime dependencies
It brings nothing with it beyond the stylesheet.