Edition No. 12 · 6 Sep 2026
Twelve repositories for making a small site look deliberate
Component kits, icons, self-hosted fonts, and the tools that stop a page looking like four separate afternoons.
Edition 10 went looking at the words on your pages, on the grounds that nine editions of plumbing had never once inspected the actual sentences. Today is the same argument one layer out. There are a hundred and eighty-two repositories in the ledger and a hundred and thirty-seven of them recommended to you, and not one of them is about what any of it looks like.
That gap is worse for you than for most founders, because Grasppy is a product about seeing. Its entire pitch is that a long conversation has a shape and you can show it. A product that makes that argument while looking like whatever the defaults were on the afternoon each screen got built is arguing against itself in the first two seconds — before any of the copy Edition 10 taught you to check gets read at all.
The obvious objection is that you are not a designer and cannot become one this month. Which is why eleven of today's twelve entries share one property: the design is source code Claude Code can edit. Components as files in your repo. Icons as a package. Fonts as a package. Structured data the compiler checks. Diagrams as text. Tables as Python. Two entries break that rule — the two actual visual tools — and they are marked as the bigger commitments they are.
Eight entries are marketing-shaped, three sharpen Grasppy or ScalpingMate, one is the bench. All twelve are new to you; no repeats today. Three are hidden gems under 3,000 stars. Seven further candidates were verified and deliberately left out, named in the appendix with the reason.
This edition, in numbers
| Repos | 12 |
| Hidden gems (<3k stars) | 3 |
| Marketing / product / wildcard | 8 / 3 / 1 |
| New to you | 12 |
| Repeats | 0 |
| Dropped on check | 7 |
Two things worth knowing
- Perspective has left FINOS. finos/perspective now resolves to perspective-dev/perspective. Old links still work, but the canonical name changed — that is the third repository in three editions to move house, after Vale and SQLAdmin. Note that the npm packages may still sit under the old @finos scope; check the docs rather than trusting an install line from a tutorial. - shadcn/ui is not a dependency, and that is the entire point. It copies component source into your project — there is no package in node_modules to upgrade and no version to pin. The upside is total control and a codebase Claude Code can read. The honest downside, stated once here rather than buried: nobody upstream fixes bugs in your copy, and components you add in January will not match the ones you add in July unless you deliberately re-sync them.
If you only do three things
- Self-host your fonts with Fontsource (#3) — tonight, thirty minutes. Last week you were told to put a consent banner up. Google Fonts is precisely the kind of third-party call that banner has to gate: loading a font from Google sends every visitor's IP address to Google, and German courts have already ruled that unlawful without consent. Self-hosting removes the question entirely, makes the page faster, and gets the Russian side of the site a real Cyrillic subset instead of a fallback that looks like a different website.
- Run shadcn/ui (#1) over the React app — this week. It is the single biggest change available to how Grasppy looks, and the delivery model is why it suits you rather than a designer: the components are copied into your repository as ordinary source files, so Claude Code edits them like anything else. No theming API to fight, no package to pin.
- Add schema-dts (#9) to the Astro site — one hour, then never again. Five editions of AI-visibility advice have circled the same finding: machines cannot tell what your pages are. This is the half that
llms.txtdoes not cover, written as typed objects so a mistake fails the build instead of failing silently for a year. It was verified yesterday and set aside only for lack of room. Don't let it sit twice.
Every link in one place
| # | Repository | Official site | Stars | Licence |
|---|---|---|---|---|
| 1 | shadcn-ui/ui | ui.shadcn.com | 122.6k | MIT |
| 2 | lucide-icons/lucide | lucide.dev | 24.3k | ISC |
| 3 | fontsource/fontsource | fontsource.org | 6.0k | MIT |
| 4 | penpot/penpot | penpot.app | 58.5k | MPL-2.0 |
| 5 | onlook-dev/onlook | onlook.com | 26.6k | Apache-2.0 |
| 6 | storybookjs/storybook | storybook.js.org | 90.8k | MIT |
| 7 | svg/svgo | svgo.dev | 22.6k | MIT |
| 8 | ascorbic/unpic-img 💎 | unpic.pics | 2.1k | MIT |
| 9 | google/schema-dts 💎 | schema.org (vocabulary) | 1.2k | Apache-2.0 |
| 10 | mermaid-js/mermaid | mermaid.js.org | 89.8k | MIT |
| 11 | perspective-dev/perspective | perspective-dev.github.io | 11.2k | Apache-2.0 |
| 12 | posit-dev/great-tables 💎 | posit-dev.github.io/great-tables | 2.7k | MIT |
The look of the thing
Twelve repositories, checked and reviewed. Every version verified against the GitHub API and dated.
123.3k stars · MIT · shadcn@4.21.0 (2026-09-04)
Not a library you install — a folder of accessible React components you own, copied into your repo.
▶Repo detailsthe review · specs · pros & cons · install
What it is
A collection of accessible React components — dialogs, dropdowns, tables, forms, tooltips — that you copy into your own repository with one command, instead of installing as a package. Underneath it uses Tailwind for styling and Radix for behaviour, but what lands in your project is plain, editable TSX.
Why it matters
Grasppy's screens are React, and each one currently looks like whatever the default was on the afternoon it was built — which reads to a visitor as a prototype, whatever the product actually does. This is the fastest available route to a product that looks deliberate, and the copy-in delivery model is why it fits you rather than a design team: the components arrive as files in your repo, so Claude Code reads and edits them like any other source, with no theming API in the way. It also brings keyboard navigation and screen-reader labelling with it, which is a large fraction of what pa11y (Ed. 11 #6) would otherwise hand you as a list of defects. And it is the natural place for Lucide (#2) to land, since shadcn uses it by default.
- The code is yours: no upgrade treadmill, no version to pin, nothing to break on a dependency bump.
- Accessibility comes built in through Radix rather than being bolted on later.
- Vast public example base, which means Claude Code is unusually good at it.
- It assumes Tailwind. If Grasppy's React app is not on Tailwind, this is a bigger decision than a component install.
- You own the code, so you also own the bugs — nobody upstream patches your copy.
- Components added months apart drift out of sync unless you deliberately re-run them.
npx shadcn@latest init
24.4k stars · ISC · 1.42.0 (2026-09-07)
~1,600 icons on one 24px grid at one stroke weight — the cheapest way to stop looking like four separate afternoons.
▶Repo detailsthe review · specs · pros & cons · install
What it is
Around 1,600 open-source icons on a consistent 24-pixel grid with a single stroke weight, shipped as packages for React, Vue, Svelte and plain HTML. It is the actively maintained community fork of Feather Icons, and the default icon set for shadcn/ui.
Why it matters
Mixed icon sources are the most legible sign of a self-assembled product: a heavier stroke here, a rounded corner there, one icon that is obviously from a different pack. Visitors do not name it, they just downgrade their estimate of the whole thing. One import fixes it everywhere at once, including the toolbar sitting over the React Flow (Ed. 1 #9) canvas and the tree view from react-arborist (Ed. 7 #11). It ships constantly — 1.40.0 landed on 3 September — so the set keeps filling in, and the SVGs are equally usable in a Penpot mock-up or a YouTube thumbnail.
- One visual system across the app, the site and your video graphics.
- Tree-shakeable, and the ISC licence is as permissive as MIT.
- Releases roughly weekly, so gaps in the set get filled.
- Outline style only — no filled or duotone variants, which limits emphasis.
- Importing the whole package instead of individual icons quietly inflates the bundle.
- Sooner or later you will need an icon it does not have, and drawing a matching one is a real skill.
npm i lucide-react
6.1k stars · MIT · core-v0.4.0 (2026-09-06)
Self-hosted open-source fonts as npm packages, split by weight and subset — including cyrillic.
▶Repo detailsthe review · specs · pros & cons · install
What it is
Open-source fonts — the Google Fonts catalogue and more — packaged as npm modules you install and serve from your own domain, split by weight and by character subset. You import exactly what you use; nothing is fetched from Google when a visitor loads the page.
Why it matters
Three arguments, and all three are specifically yours. First, compliance: loading fonts from Google's CDN transmits every visitor's IP address to Google, which German courts have already found unlawful without consent — so CookieConsent (Ed. 11 #5) would have to block your typography until someone clicks accept, which looks broken. Second, speed: one fewer DNS lookup and connection on every first visit, which is exactly what web-vitals (Ed. 8 #2) exists to measure. Third, and least obvious: the cyrillic subset is a first-class option here, so the Russian half of the site gets proper typography instead of the system fallback that quietly makes it look like a different, cheaper website.
- Removes a third-party request and a legal question in the same thirty minutes.
- Explicit subsets mean full Cyrillic support without shipping every glyph on earth.
- Identical usage in Astro and in the React app — one decision, both surfaces.
- You now own font versioning and cache headers, which Google was handling for you.
- Importing the wrong file silently ships a very large font — check what you imported.
- It is a monorepo tagged per package, so "the latest release" needs reading carefully rather than at a glance.
npm i @fontsource/<family>
59.7k stars · MPL-2.0 · 2.17.2 (2026-08-27)
A Figma you can self-host, storing work in SVG and CSS rather than a proprietary binary.
▶Repo detailsthe review · specs · pros & cons · install
What it is
A browser-based design and prototyping tool, fully open source, which stores its work in open web standards — SVG and CSS — rather than a proprietary binary. It runs on their hosted service or on your own server.
Why it matters
Every visual decision in Grasppy is currently made in code, by a collaborator who cannot see the result. Penpot is where you try three landing-page arrangements in twenty minutes before asking Claude Code to build one — and because its layout model maps onto CSS Flex and Grid, what you hand over is values, not vibes. There is a smaller privacy argument too: unreleased pricing pages and unannounced features are exactly the material you might not want sitting on somebody else's design service, and this one you can host. The honest framing: this is the one item on today's page that will not pay off in an afternoon, because the cost is your learning rather than the install.
- MPL-2.0 and genuinely self-hostable — no seat pricing, no vendor holding your files.
- Open file format, so nothing you draw is trapped.
- Flex and Grid layout that corresponds to what the browser actually does.
- The real cost is learning a design tool, which is weeks of occasional use, not an evening.
- Self-hosting is several containers with their own database — use the hosted tier to evaluate.
- Figma tutorials do not translate one-for-one, and Penpot's own material is thinner.
Standalone tool — it produces mock-ups and CSS values, not code in your repo.
26.7k stars · Apache-2.0 · v0.2.32 (2025-07-17)
Click an element in a live preview, nudge the padding, and it writes the change back into the React source file.
▶Repo detailsthe review · specs · pros & cons · install
What it is
An open-source visual editor for React and Tailwind projects: you click an element in a live preview, adjust padding, colour, size or text, and the change is written back into your source files. It also has an AI mode for larger edits.
Why it matters
You build everything through Claude Code, which is excellent at structure and completely blind to "that heading sits four pixels too close to the rule." That specific gap — seeing a problem you cannot describe precisely enough to fix in words — is what this closes. Nudge it by eye, and the diff lands in the repository where Claude Code picks it up on the next task, so nothing is trapped in a canvas. The realistic caveat: it is happiest with Next.js and Tailwind projects, so how cleanly it grips Grasppy depends on what that app is actually built from. That is a thirty-minute experiment, not a week's migration.
- Edits map back to source files, so the visual tool and the codebase stay the same thing.
- Apache-2.0, and the project is moving fast with a large community.
- Solves precisely the non-designer-with-a-codebase problem, which almost nothing else does.
Runs on the Mac against the React front end's source tree.
91k stars · MIT · v10.6.0 (2026-09-02)
Every component rendered on its own, in every state, including the states you never remember to open.
▶Repo detailsthe review · specs · pros & cons · install
What it is
A workshop that renders each interface component on its own, outside the running app, in all of its variants. It builds to a static website you can open, host or send to somebody.
Why it matters
The characteristic failure of a solo-built product is not the happy path — it is the empty state, the error state and the state where a Russian label is forty percent longer than the English one and breaks the row. You never see those, because you only ever open the screen with your own good data in it. Storybook makes looking at them deliberate rather than accidental. There is a second, marketing-shaped payoff: the built output is a living style guide, which is the thing you point a freelancer or a future collaborator at instead of writing an explanation. Honest warning — this is overhead, and it pays only if you actually write the stories.
- Forces the empty, error and overflow states into view before a user finds them.
- The static build doubles as documentation of how the product is meant to look.
- Pairs naturally with shadcn/ui (#1) — one story per component you copy in.
- Genuine overhead: every component needs a story file written and then kept current.
- A third build toolchain beside Astro and the app itself.
- The common outcome is a Storybook that goes stale within a month and then misleads.
There is a second, marketing-shaped payoff: the built output is a living style guide, which is the thing you point a freelancer or a future collaborator at instead of writing an explanation.
npx storybook@latest init
svg/svgo
22.7k stars · MIT · v4.1.0 (2026-08-24)
Rewrites SVG files several times smaller without changing how they look.
▶Repo detailsthe review · specs · pros & cons · install
What it is
A tool that rewrites SVG files to be much smaller — stripping editor metadata, merging paths, rounding coordinates — without changing how they look. It runs as a command, a config file, or a plugin inside a build.
Why it matters
Every SVG that leaves Penpot, Illustrator or an icon site carries a payload of editor bookkeeping, frequently more than half the file. Those files then sit in your Astro pages and your email headers, where imgproxy (Ed. 6 #2) and lite-youtube-embed (Ed. 7 #8) both went to real trouble to save considerably fewer bytes. It is also what makes an exported Grasppy map from modern-screenshot (Ed. 8 #8) small enough to attach to an email without apologising for it.
- Seconds to run, nothing to host, no account, no cost.
- Safe defaults — the standard preset rarely changes appearance.
- Drops into a build step or a git hook so it happens without you remembering.
- Aggressive settings can break gradients, filters and animated SVGs — always look at the output.
- It only helps if it runs on every asset; one hand-copied file undoes the habit.
- Nothing to do with raster images — photographs and screenshots stay imgproxy's problem.
npx svgo
2.1k stars · MIT · @unpic/react 1.0.2 and siblings (2025-12-08, year confirmed via releasealert.dev)
One image component for Astro, React and eight other frameworks that already knows imgproxy's URL format.
▶Repo detailsthe review · specs · pros & cons · install
What it is
A small responsive-image component for Astro, React and eight other frameworks that generates the correct srcset, sizes and layout CSS for you. It knows the URL formats of around thirty image services, imgproxy included.
Why it matters
Edition 6 recommended imgproxy so images could be resized and converted to modern formats on demand — and then left you to hand-write the markup that actually asks it for the right size on the right screen. That is exactly the part that gets skipped, which is how every phone ends up downloading the desktop image and the whole exercise earns nothing. This is that missing half, which is why the two belong in the same sentence. It also reserves the right space before the image loads, so the page does not jump — one of the three numbers web-vitals (Ed. 8 #2) reports on. Stated plainly: it went 1.0 across all its framework packages in December 2025 and has been quiet since, which reads as finished rather than abandoned — but check before you build on it.
- Already speaks imgproxy's URL format, so there is no adapter to write.
- Prevents layout shift by default rather than as an option you must remember.
- The same component in Astro and in React, so the two surfaces behave alike.
- Nine months since the 1.0 releases — small and stable, but not actively moving.
- Only helps images served through a CDN or imgproxy; plain static files get little from it.
- It is another dependency for something a competent developer writes once by hand.
npm i @unpic/astro or @unpic/react , point it at the imgproxy URL you already have, and replace <img> tags.
npm i @unpic/astro
1.2k stars · Apache-2.0 · v2.0.0 (2026-03-23)
Typed JSON-LD for the Schema.org vocabulary — structured data the compiler can check.
▶Repo detailsthe review · specs · pros & cons · install
What it is
Google's TypeScript type definitions for the whole Schema.org vocabulary, so a JSON-LD block becomes a typed object instead of a hand-written blob of JSON. Wrong property names and wrong shapes become build errors.
Why it matters
geo-optimizer-skill (Ed. 1 #8, repeated Ed. 8 #3) keeps returning the same finding: search engines and answer engines cannot reliably tell what your pages are. llms-txt (Ed. 2 #7) was one half of the answer; SoftwareApplication, FAQPage, VideoObject and Organization markup is the other, and it is what puts your tutorials into rich results and your product into an AI answer with a name attached. Your Astro site is TypeScript, so this is an hour that then never rots — a mistyped property fails the build instead of failing silently for a year, which is the normal fate of hand-written JSON-LD. It was verified yesterday for Edition 11 and set aside only for lack of room on the page; it is here today so it does not sit twice.
- Errors surface at build time instead of as a quietly missing rich result.
- From Google, and generated from the actual vocabulary rather than someone's summary of it.
- Types only — nothing ships to the browser except the JSON-LD you meant to write.
- TypeScript only, so pages rendered by FastAPI get no help from it.
- The types are strict and Schema.org is loose; some legitimate markup needs a cast.
- Structured data makes you understood. It does not create demand, and it will not rescue a page nobody wants.
Your Astro site is TypeScript, so this is an hour that then never rots — a mistyped property fails the build instead of failing silently for a year, which is the normal fate of hand-written JSON-LD.
npm i -D schema-dts
90.2k stars · MIT · @mermaid-js/tiny@11.17.2 (2026-08-25)
Diagrams from a few lines of plain text, rendered natively by GitHub, Notion, Obsidian and Claude.
▶Repo detailsthe review · specs · pros & cons · install
What it is
A library that renders diagrams — flowcharts, mind maps, timelines, sequences — from a few lines of plain text. GitHub, Notion, Obsidian and Claude all render Mermaid natively, so the recipient needs nothing installed.
Why it matters
Grasppy's map currently lives inside Grasppy. The moment a user wants it in a report, a wiki page or a message to a colleague, the best they can do is a screenshot — a dead image with your product cropped out of the frame. A "Copy as Mermaid" button turns the map into portable text that redraws itself wherever it is pasted, and every one of those places is a surface where somebody else's colleague sees the shape of your output. That is the cheapest distribution mechanism available to a tool like yours, and it costs one serialiser over the tree you already hold in state. It is also a second, phone-friendly view of the hierarchy alongside react-arborist (Ed. 7 #11).
- Renders natively on GitHub, in Notion and in Claude — no library for the person you send it to.
- The output is small, diffable text, so it can live in a repo or a document.
- Its mindmap and flowchart types match the shape Grasppy already produces.
- Layout control is limited: a two-hundred-node map will come out ugly and there is little you can do.
- Embedding the renderer in your own app adds real weight — prefer exporting text over shipping the library.
- Text export loses your styling and the drill-in interaction entirely; it is a portable summary, not the product.
It is also a second, phone-friendly view of the hierarchy alongside react-arborist (Ed.
Pure serialisation: a FastAPI endpoint or a front-end function that walks the existing subtopic tree and emits Mermaid syntax.
11.2k stars · Apache-2.0 · v5.3.1 (2026-09-04)
WebAssembly data grid and charts for large or streaming datasets — pivot two hundred thousand trades in the browser.
▶Repo detailsthe review · specs · pros & cons · install
What it is
A data-visualisation and analytics component built for large and streaming datasets, compiled to WebAssembly, with a matching Python package. The same table and chart configuration works in a notebook and in a React page.
Why it matters
ScalpingMate now has a research chain — tsfresh, Optuna, arch, SHAP, skforecast — and, since last week, a chart to show a customer in lightweight-charts (Ed. 11 #10). What it has never had is the screen in between: the one where you interrogate a backtest, pivoting a hundred thousand fills by hour, session and day of week to find out whether the edge is real or lives entirely in one London morning. Perspective does that at a speed a pandas round-trip through FastAPI cannot approach, and Apache-2.0 means the same grid can later sit inside a paid screen. Note the move: finos/perspective now resolves to perspective-dev/perspective.
- Genuinely fast on hundreds of thousands of rows, in the browser, with no server round-trip per pivot.
- One configuration works in a marimo notebook (Ed. 6 #12) and in the React app.
- Apache-2.0, so unlike backtesting.py it is safe inside a paid feature.
- The WebAssembly bundle is large — lazy-load it on an analysis page, never on the landing page.
- Its configuration model is a world of its own to learn, and the docs assume finance-desk familiarity.
- It is for interrogation, not presentation: the polished customer-facing chart is still lightweight-charts.
Python side feeds it from the same DataFrames DuckDB (Ed.
Python side feeds it from the same DataFrames DuckDB (Ed. 10 #11) produces; browser side is a web component dropped into a React analysis route.
2.7k stars · MIT · v0.24.0 (2026-08-24)
Display tables in Python with titles, spanners, footnotes and real number formatting — from a pandas or Polars frame.
▶Repo detailsthe review · specs · pros & cons · install
What it is
A Python library for composing display tables — title, stub, column spanners, formatted numbers, footnotes, conditional colour — from a pandas or Polars DataFrame. It outputs HTML, or an image.
Why it matters
quantstats (Ed. 4 #11) gives you the monthly-returns tearsheet; everything else in ScalpingMate ends its life as print(df). When you eventually show a strategy's numbers to somebody who might pay for them — in the app, in a blog post, in a Typst guide (Ed. 8 #7), or on a YouTube frame — a raw DataFrame says "unfinished side project" in exactly the way mismatched icons do on a landing page. This is thirty lines that make the same numbers look audited: percentages formatted as percentages, currencies as currencies, a source note under the table saying which period it covers. It is the same argument as everything above this line, applied to the one artefact in ScalpingMate a customer actually reads.
- Real table structure — titles, spanners, footnotes, source notes — rather than a grid of strings.
- HTML output drops straight into a FastAPI response or an emailed report.
- MIT, so it can render tables inside a paid feature without a licence conversation.
- Display only: no sorting, filtering or interactivity — that is Perspective's job (#11).
- The API is its own vocabulary, borrowed from R's
gt, so it takes an afternoon to feel natural. - Exporting to an image needs a headless browser, which is another thing to install on the VPS.
pip install great_tables
Checked, and left out
These were opened for this edition and did not make it, with the reason.
radix-ui/primitives
radix-ui/primitives (19.2k, MIT) — the accessibility engine under shadcn/ui, now maintained by WorkOS. No tagged releases at all, so recency unprovable, and it arrives anyway as shadcn's dependency. Backlogged.
radix-ui/colors
radix-ui/colors (1.6k, MIT) — accessible colour scales with matched dark-mode pairs; 93 commits, no releases, no readable dates. Backlogged; the right answer if he ever wants a colour SYSTEM rather than hexes chosen one at a time.
argyleink/open-props
argyleink/open-props (5.5k) — CSS custom properties for spacing, colour, shadows, easing. Licence not readable on the page, and the release date came back as '29 Sep' with no year, which would be in the future. Unverifiable. Backlogged.
hunvreus/basecoat
hunvreus/basecoat (4.0k, MIT) — shadcn/ui's look for plain HTML + Tailwind, no React. Verified alive but 0.3.3 was 2025-11-05, ten months. Backlogged as the answer if the Astro site ever wants the app's look.
matplotlib/mplfinance
matplotlib/mplfinance (4.4k, BSD) — candlestick charts in matplotlib; was the intended ScalpingMate research-chart slot. PyPI 0.12.10b0 dated 2023-08-02: three years and still beta. Dropped.
d3/d3-hierarchy
d3/d3-hierarchy (1.3k, ISC) — treemap, circle-pack and tidy-tree layouts, a genuinely phone-friendly alternative to Grasppy's node-and-edge canvas. Last release v3.1.2, April 2022. Backlogged WITH A CAVEAT: D3's modules are stable rather than dead, so this deserves a second look rather than a write-off.
delucis/astro-og-canvas
delucis/astro-og-canvas (279) — automatic OpenGraph images for Astro pages, natural pair for Starlight (Ed.4 #4). No licence shown, no releases. Backlogged.