Skip to content
Side project

Nova

A fintech UI kit for React and Tailwind CSS v4: 16 blocks built on the idea that in trading interfaces, the numbers are the interface.

2026
  • React JS
  • TypeScript
  • Tailwind CSS
  • Design Systems
  • shadcn
  • Vite
  • Fintech
  • Web
  • Responsive
Blocks shipped
16
Design tokens
19
Config files
0

In late June 2026, I built and shipped Nova, a fintech UI kit for React and Tailwind CSS v4. The idea behind it is that in trading interfaces, the numbers are the interface, so every block defaults to tabular numerals, signal-aware up/down color, and one authored easing curve. It's live at nova.davemaynard.dev.

The entire brand lives in a single @theme block of 19 design tokens, with no tailwind.config.js at all. Since Tailwind v4 went CSS-first, a kit can ship its whole identity as one file. Swap the palette and all 16 blocks re-theme.

Distribution runs through a shadcn registry. I wrote a build script that reads each block's source, rewrites internal imports to their post-install paths, and inlines the code into per-item JSON, so npx shadcn add resolves the full chain from block to primitives to tokens in a clean consumer app. I verified the install end to end in a scratch app rather than assuming it worked.

I'm happy with two decisions in particular. The storefront is assembled from Nova's own marketing blocks, so the landing page is its own demo. And the block gallery's copy button copies the exact shipped source via Vite ?raw imports instead of a hand-maintained snippet that could drift out of date.

The 10 marketing blocks are free. The 6 application blocks (portfolio dashboard, positions and P&L, order ticket) will become the paid tier.

More side projects

More side projects
Contact

Let’s build something

Have a project, a role, or a problem worth solving? I’d love to hear about it.

Get in touch

or email davemaynard24@gmail.com