Archive

@sushindustries/ui

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

3 min read
View as Markdown

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

Viewport width
Desktop100%whatever the page has
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, icon.tsx
Dependencieszod@^4.4.3
Also installscardCardTitle, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.@sushindustries/ui · layout
Tagsblock, grid, filter, schema
UsesCardCardTitle, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.@sushindustries/ui · layout
Mentioned inPagination