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, icon.tsx |
| Dependencies | None |
| Also installs | copy-buttonCopy ButtonA glass chip that writes to the clipboard and confirms in the button itself, then hands back.@sushindustries/ui · content |
| Tags | iframe, responsive |
No runtime dependencies
It brings nothing with it beyond the stylesheet.