preact-components: server-rendered Preact and Tailwind components
Every component runs in the live UI guide, with its code beside it.
The design system, the component styling and the original markup are by Eirene. Eirene on GitHub · isorokina.com
deno add jsr:@spy4x/preact-ui@3.23.0From JSR, pinned to 3.23.0.
Screenshots
The live UI guide's overview page: a side navigation listing every package, and one card per package — UI, System, CRUD, Charts, Map, Signals, Theme, Icons and cn — each with its import name, a one-line summary and a count of its live cards or icons, or the words Examples coming for a package that has none yet. The UI package's page in the opt-in ink dark palette: the side navigation lists the UI components by group, the Badge and StatusMark cards show their live examples, and the CiStatusPill card's description starts below them.
1 / 2
Live proof
What it is
A Preact port of Eirene's design system: components, design tokens, icons, charts and signals helpers in ten packages. Every module is a standard ES module that renders to HTML on the server and hydrates in the browser, with keyboard handling and focus written by hand. The tests and the build run on Deno.
10 packages, each installed on its own:
@spy4x/preact-cn@spy4x/preact-icons@spy4x/preact-signals@spy4x/preact-theme@spy4x/preact-charts@spy4x/preact-system@spy4x/preact-ui@spy4x/preact-crud@spy4x/preact-map@spy4x/preact-ui-guide
Use it if
- You build a Preact app with Tailwind and want components that render on the server and hydrate in the browser.
- You want charts rendered as SVG on the server.
- You want to see every component running, with its code, in a live guide before you pick it.
Don't use it if
- Your app is React: these are Preact components.
- You need components checked with a screen reader: none has been run against them yet.
- You do not use Tailwind: every component renders Tailwind classes.
How it fits with my other repos
The post
More tools
mig
tiny self-hosted meeting scheduler.
In useZond
internal health probe bridge for services behind SSO proxies.
In usecaldav-mcp
MCP server that lets AI assistants read and write CalDAV events and tasks.
In use
Need something like this for your team?
That's my day job.