THE PRIVATE PROJECTS COLLECTION

Portfolio exhibition

The actual Portfolio viewport stage, Working on rail, material cards, search and OR technology filters.

Source compositionPortfolioPortfolio collectionv0.2.1

Project theme

Previewing Shelfmark · system mode. Examples keep their state while you compare.

Both original modes, adapted for shared controls.

Live previewShelfmark · system

Comparison appearance · ShelfmarkOpen full-page preview

Projects

Authored by Royer Adames

Tech

2 projects

Working on

Showing still 1 of 2
Shelfmark
Bookmark manager · sample library
Stack
A place for the links worth keeping. Search, organize and return to a personal library.
Shelfmark project page

All projects

Showing still 1 of 2
Stockroom
Inventory control · fictional demo data
Stack
A clear view of stock, movement and the work that needs attention. The captures contain seeded fictional inventory.
Stockroom project page

Pitfalls

Common mistakes this block prevents, and how.

I1 · Wrong plural for a count of one (projects)The project count uses pluralize.

Use in your projectNext.js · React · Tailwind 4

In an initialized shadcn project, run this command. Keep your existing Radix or Base choice; these components declare their own dependencies.

npx shadcn@4.21.3 add 'https://ui.royeradames.com/r/portfolio-exhibition.json'

Copies 15 source files + shared token CSS. No catalog or Storybook dependency.

Theme setup and safe updates

The component imports its small foundation stylesheet. To apply Shelfmark, add its theme:

npx shadcn@4.21.3 add 'https://ui.royeradames.com/r/theme-shelfmark.json'

Import components/royer/theme-shelfmark.css in your app’s root stylesheet or layout. Set data-project-theme="shelfmark" on the root HTML element and data-mode="dark" for dark mode. Use your existing theme provider to resolve system preference.

Updates are deliberate. Commit local changes first, inspect shadcn add --diff, then review and merge. Never overwrite a customized component blindly.

Dependencies and source files

@fontsource/geist, @phosphor-icons/react, clsx, motion, tailwind-merge

portfolio-exhibition.tsx
cn.ts
portfolio-badges.tsx
portfolio-card-frame.tsx
portfolio-card-stills.ts
portfolio-finder-query.ts
portfolio-image.tsx
portfolio-media-state.ts
portfolio-project-card.tsx
portfolio-project-still.tsx
portfolio-tip.tsx
portfolio-types.ts
portfolio-working-on.ts
portfolio.css
pluralize.tsx

Read component source

Loading source…