Build your SaaS with AI — on components you actually own
Every component ships as readable .tsx — install it as a dependency or copy it into your repo. Your bundler compiles it, your agent can read it, your brand can keep it.
85+
Components
11
Packages
1
Lockstep version
0
Build steps
The basics, doing real work
Not a component zoo — product surfaces. Every card below is rendered live by the library: forms, settings, KPIs, teams. Tab through them, they all work.
An email editor. On your page. In your codebase.
Stop paying rent for your own email templates. Drop the block editor into your app, let your users design emails, render the same document server-side. This one is live — drag something.
Live — this is the real component
Yes, even the globe.
Maps and a 3D globe on free, key-less vector tiles. Lazy-loaded so your bundle never pays for it until it's on screen.
Beyond primitives
Buttons and dialogs are table stakes. These are the product-level surfaces a SaaS actually needs — published in lockstep at one version.
@voila.dev/ui-email-block-editor
The email template editor that lives in your app, not someone else's SaaS.
Read the docs
@voila.dev/ui-spreadsheet
An editable, virtualized grid your users will mistake for a native app.
Read the docs
@voila.dev/ui-content-editor
A rich content editor that lives in your app, from one feature registry.
Read the docs
@voila.dev/ui-datatable
Sorting, pinning, CSV export — the table you keep rebuilding, finished.
Read the docs
@voila.dev/ui-chart
Charts with zero charting library. SVG you can read, scales included.
Read the docs
@voila.dev/ui-map
Maps and a globe on free vector tiles. No API key, no bundle tax.
Read the docs
@voila.dev/ui-filter
Composable filters that survive real product requirements — including geo.
Read the docs
@voila.dev/ui-landing
Your marketing site, from the same system as your product.
Read the docs
@voila.dev/ui-icon
Icons by name, safe by default — store a string, render an icon.
Read the docs
@voila.dev/ui-tokens
Your whole brand in one CSS file. Change it, everything follows.
Read the docs
@voila.dev/ui
…and the 85 components underneath it all. One convention, the floor everything else stands on.
Read the docs
Own it, both ways
Most kits make you choose on day one. Here it's the same source either way.
As a dependency
One bun add, lockstep updates across 11 packages, your bundler compiles the source. The mode that scales: ship two, three, five products on the same components — one version bump updates every app, instead of maintaining N pasted copies of every button, table and email block.
As your code
Copy any .tsx out of node_modules into your repo. Same file, zero ceremony — no CLI to run, no generated files to babysit, no registry to sync. Your package manager already is the registry.
Copy-paste kits feel free until your second SaaS. Then every component is a fork you maintain everywhere it's pasted.
Built on Base UI
Accessibility, focus management and keyboard behaviour come from Base UI. The components add styling, composition and defaults.
Yours to rebrand
Every colour, radius and font is a CSS custom property. Override the handful you care about and the whole system follows.
Built for the AI workflow
A compiled bundle is a wall. Source is a door — for you and for the model doing the typing.
Readable by agents
The source sits in node_modules as .tsx. Cmd+click and your model both land on real code, so “make the checkout use our brand” actually works.
Predictable to generate against
One convention across 85 components: Base UI underneath, cva variants on top. What the model learns from one file holds for all of them.
Tokens as the contract
Tell the AI to use --primary and the whole system follows. The tokens are plain CSS custom properties, not a theming API to hallucinate around.
Read the code, then keep it
Install the packages, copy the tokens, and every component is yours to open, step through and rebrand.