Archive

@sushindustries/ui

A filterable grid with categories, subcategories and tags, that leaves routing to you.

8 min read
View as MarkdownEdit on GitHub

The component museum is this, listing the registry. It knows nothing about registries.

Viewport width
Phone22remthe floor, the narrowest this promises to work at
tanstacktanstack add https://adamjurek.com/r/tanstack/archive.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/archive.json

Three kinds of grouping, on purpose

FilterableWhy
CategoryyesEvery item is in exactly one. An item that plausibly fits two means the categories are wrong
SubcategorynoFree text, for reading. An unrecognised one costs nothing
TagsyesCross-cutting. A tag used once gets a chip used once, which is the signal it should not have been a tag

Categories are a partition and tags are a set. Collapsing them into one concept is the usual mistake and it produces a filter row where "Motion" and "no-deps" sit side by side as though they were the same kind of thing.

The schema earns its place

parseArchive does one thing Zod cannot express: it checks that every item's category was declared.

That is the failure worth catching, because it is invisible. An item pointing at a category nobody declared is filtered out of every view, renders nowhere, and produces no error at all - it simply is not in the list, and the list looks fine.

Where this is used

WhereListing
/componentsevery registry item, filtered by the category search param
apps/web/src/routes/components/index.tsxmaps the registry onto this component's shape

The mapping is a few lines and deliberately not shared. The registry knows about files and dependency versions; the archive knows about a title, a group and a picture. Keeping them apart is what lets this list things that are not packages.

Install

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

What you get

Version0.1.1
Categorylayout · Containers
Filesarchive.tsx, archive.schemas.ts, pagination.tsx
Dependencieszod@^4.4.3
Also installspaginationPaginationPages as links with first and last always reachable. The window everyone already knows, and nothing that breaks middle-click.@sushindustries/ui · docs, iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content
Tagsblock, grid, filter, schema
UsesPaginationPaginationPages as links with first and last always reachable. The window everyone already knows, and nothing that breaks middle-click.@sushindustries/ui · docsIconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content
Mentioned inBadgePagination