Styloviz blog

21 app templates: what ships in each, free and Pro

Sat, 10 Oct 2026 00:00:00 GMT

A component library tells you what the pieces are. A template tells you what they add up to. Styloviz ships 21 app templates: 3 free under MIT and 18 with a Pro licence. Each is a complete Angular application built only from Styloviz components, runs as a live demo on the site, and downloads as a project that installs, builds and renders on its own.

Three things are true of all of them:

They are working apps, not screenshots. The mailbox files mail, the till adds up, the calendar refuses a clash before you save. The demos run on mock data, and many have a switch that points them at a real API through the same typed data layer the components use.
They are checked before every release. All 21 are built as standalone projects and rendered, and a release does not ship if one fails.
Rebranding is one file. Name, logo, colours and copy live in each template's config, so the result looks like your product, not like ours.

Below, every template with a screenshot, what it does, and a link to try it. Each Pro template also has a raw walkthrough video.

Free, under MIT

Auth

The complete set of pre-session screens — sign in with providers, register with a live policy checklist, two-step verification with recovery codes, single sign-on discovered from the email domain, a lock screen that knows who it locked, and the forgot / reset-password pair. Indigo/sky shell, mock-or-live data switch.

Live demo — Free, MIT

Errors

404, 500, 503, maintenance and coming-soon pages, composed from sv-empty-state and sv-result. Slate/amber shell.

Live demo — Free, MIT

Account

Profile, security, notifications and team — packaged as its own drop-in template instead of a fourth bespoke build. Teal/cyan shell.

Live demo — Free, MIT

Pro: admin and operations

Admin Panel

Ready-to-use SaaS admin panel — 49 pages across 10 dashboards and 8 app modules, with a self-contained Midnight Pro shell (sidebar, header, dark mode).

Live demo — Pro
Walkthrough video (3:01) — A raw recording of the live demo, no sound.

AI Ops Console

Dark-first admin for AI/LLM products — chat playground, agent run monitor, token spend analytics, model comparison, RAG knowledge base, workflow builder, and a prompt library.

Live demo — Pro
Walkthrough video (3:01) — A raw recording of the live demo, no sound.

CRUD Blocks

Create, read, update and delete for one resource, offered through the four surfaces a real app needs — a table, a create modal, an edit drawer and a naming confirm — all driven by ONE form component with one set of validation rules.

Live demo — Pro
Walkthrough video (3:00) — A raw recording of the live demo, no sound.

Help Desk

A working support desk — a ticket queue sorted by how little SLA is left rather than by arrival, first-response and resolution clocks that STOP while a ticket waits on the customer, agent assignment including a deliberate Unassigned, canned replies whose placeholders are filled from the ticket, and a threaded conversation where internal notes sit in time order but are unmistakable. Sky/amber shell.

Live demo — Pro
Walkthrough video (3:00) — A raw recording of the live demo, no sound.

Project Management

A working project workspace — a sprint board where the column IS the status, a gantt timeline that prices a dragged bar before it is saved (dependents cascade, the finish date moves, Apply or Undo), a ranked backlog with a cycle-refusing dependency editor, and per-person weekly load derived from estimates spread across their span. Critical path, float, blocked and over-allocation are all computed, never stored. Cyan/sky shell with an amber constraint accent, mock-or-live data switch.

Live demo — Pro
Walkthrough video (3:09) — A raw recording of the live demo, no sound.

HRMS / People

People operations where nothing is stored twice — a directory whose employment status is derived from hire and end dates, so somebody serving notice is neither in nor out but on notice; an org chart resolved from manager edges on every render, which is why it can tell you three people are missing instead of quietly dropping them. Leave is counted in integer half-days across working days only, balances are accrued rather than kept, and a pending request is shown but never deducted. Attendance pairs an append-only punch ledger, so a day nobody clocked out of counts nothing and says so rather than inventing an end time. Payroll drafts recompute and posted runs freeze, so a correction is a signed adjustment on the next run instead of an edit to a payslip somebody has already filed with their taxes. Ink-navy/emerald shell, mock-or-live data switch.

Live demo — Pro
Walkthrough video (3:01) — A raw recording of the live demo, no sound.

POS / Inventory

A till that actually adds up — barcode scanning into a live basket, four tenders with split payments and change, parked tickets that hold their stock, printable receipts with a real Code 128 barcode, refunds priced from the receipt rather than today's price list, and voids posted as reversals. Stock is never stored: on-hand is the signed sum of an append-only movement ledger, so purchase-order receipts, cycle counts and shrink all land in the same place. Purchase orders derive their status from that ledger, over-receipts need approval, and the drawer will not close on an unexplained variance. Warm graphite/emerald shell, mock-or-live data switch.

Live demo — Pro
Walkthrough video (3:06) — A raw recording of the live demo, no sound.

Pro: working apps

Mail

A working mailbox — folders with live unread counts, label filters, search, a resizable list/reading-pane split that remembers where you put it, bulk archive and mark-read, and a rich-text compose window that lands in Sent.

Live demo — Pro
Walkthrough video (4:53) — A raw recording of the live demo, no sound.

File Manager

A working drive — folder tree, breadcrumb, list and grid views, sort with folders first and natural number order, multi-select with move/delete, a recoverable Trash, and a move that refuses to detach a folder into its own subtree.

Live demo — Pro
Walkthrough video (3:00) — A raw recording of the live demo, no sound.

Calendar

A working calendar — month, week, day and agenda views, calendars you can switch on and off from the rail, search across titles, locations and attendees, clash detection shown before you save rather than after, and create / edit / delete against a mock-or-live API. Blue/violet shell.

Live demo — Pro
Walkthrough video (3:38) — A raw recording of the live demo, no sound.

Team Chat

A working team messenger — channels (public and private), direct messages, threads with a side panel, presence with each person's own clock, mention autocomplete that warns before you name somebody who cannot see the room, optimistic sends that keep their place and offer Retry, and an unread divider pinned where you left off. Unread is a read position, never a stored count. Plum/emerald shell — an aubergine conversation rail with the room on an inset sheet — and a mock-or-live data switch.

Live demo — Pro
Walkthrough video (3:00) — A raw recording of the live demo, no sound.

LMS / Course Platform

A course platform that refuses to store a progress percentage — coverage is the merged union of the second-ranges actually watched, so scrubbing to the end credits nothing and a lesson completes by its own kind's rule: coverage for a video, a pass for a quiz, a hand-in for an assignment, attendance for a live session. The player commits watched stretches from a heartbeat and leaves the gaps uncovered, because that is the truth. Grades are weighted over the assessments actually marked, so an unmarked paper is an em dash rather than a zero, and the gradebook shows the floor and the ceiling beside the average because one says what happens if you stop and the other whether carrying on can still change it. A mark freezes at submission and a regrade is a record beside it, never an edit to it. Late work is a window with a stated price rather than a red date, and the instructor's studio prices every curriculum change against the people already enrolled before it will save. Oxford-teal and saffron shell on a warm paper neutral, mock-or-live data switch.

Live demo — Pro
Walkthrough video (3:01) — A raw recording of the live demo, no sound.

Pro: public sites

Store E-Commerce

A complete e-commerce storefront — home, category (PLP), product (PDP), search, compare, cart, multi-step checkout, order tracking, account and auth. Light-first "Fresh Market" emerald shell with signal-based cart / wishlist / catalog state.

Live demo — Pro
Walkthrough video (3:01) — A raw recording of the live demo, no sound.

Real Estate

A working property portal — map-and-list search with live filters, a listing page with gallery, floor-plan comparison, price history and a mortgage estimator, side-by-side compare, saved searches and an agent pipeline. Olive/brass shell, mock-or-live data switch.

Live demo — Pro
Walkthrough video (3:01) — A raw recording of the live demo, no sound.

Launch

A SaaS marketing site — hero with a working sign-up, feature grid, a numbered how-it-works, social proof, an FAQ accordion and a pricing page whose annual prices, savings and discount badge are all DERIVED from one monthly figure per plan. Fuchsia/indigo shell, scroll reveals that degrade to nothing without JavaScript.

Live demo — Pro
Walkthrough video (3:01) — A raw recording of the live demo, no sound.

Documentation Site

A documentation site that stores no cross-reference at all. The table of contents is the article's own headings, its anchors are derived once and handed to both the heading id and the contents entry, prev/next walks the exact list the sidebar draws, breadcrumbs are read from the group that names the page, and “current version” comes off the changelog by comparing versions numerically — so 3.10 outranks 3.9. A link names a page rather than its kind, and a dangling slug or a dangling anchor is reported as broken instead of navigating a reader nowhere; the home page shows that sweep beside the review queue, because a staleness policy nobody sees is a policy nobody works through. Prose is typed data, never markup, so nothing on the page can inject HTML. Search indexes sections rather than pages, states the hits it suppressed, and tells “nobody has searched yet” apart from “nothing matched”. One component serves guides and reference pages, and it checks the route's kind against the article's, so a wrong URL is a recoverable 404 with near-misses rather than a page under the wrong heading. Green/orange shell, mock-or-live data switch.

Live demo — Pro
Walkthrough video (3:03) — A raw recording of the live demo, no sound.

Portfolio

A design studio's public site — editorial masonry work index with discipline filters, long-form case studies with before/after comparison and a plate lightbox, a studio page whose figures are counted from the catalogue, and a contact form that arrives knowing which work the visitor opened. Ink-and-bone shell, rose accent, mock-or-live data switch.

Live demo — Pro
Walkthrough video (3:06) — A raw recording of the live demo, no sound.

Developer Portfolio

A software engineer's personal site — an interactive terminal hero you can actually type into, ⌘K command-palette navigation, case studies that show the real diff and the number it moved, a contribution year, a skills radar and a career timeline. Dark by default, lime signal accent, mock-or-live data switch.

Live demo — Pro
Walkthrough video (3:05) — A raw recording of the live demo, no sound.

How to get them

The 3 free templates are MIT-licensed. The 18 Pro templates come with every Pro licence, Personal, Team and Enterprise alike, as runnable projects you download with your licence key. A 14-day evaluation key covers the components but not the Pro templates; their live demos are open to everyone.

All templates — The gallery: live previews, walkthroughs and downloads.
Pricing

Originally published at https://styloviz.dev/blog/app-templates-what-ships-in-each.

What 29,000 tests look like in a UI kit

Sat, 10 Oct 2026 00:00:00 GMT

"Tested" is the cheapest word on a component library's landing page. Here is what it means for Styloviz, with the numbers from the release gate that shipped 1.0.1 on 7 October 2026, and three things that gate caught in the last week.

The numbers

Measured for the 1.0.1 release, 7 October 2026.
What	Count	Where it comes from
Unit and component tests	29,176	The last full instrumented run (scripts/coverage.baseline.json)
Spec files	1,253	Every *.spec.ts in the libraries and the app
Line coverage	99.15%	Same run; branches 94.9%
Browser end-to-end tests	158, across 25 files	Playwright, run per browser project, with axe on every page they visit
Static gates	64 check:* scripts	58 of them chained into npm run verify on every build
Angular versions proven	21 and 22	Every package installed, type-checked and linked against both before each release

The full gate takes a little over four hours on one laptop. A release does not go out until all of it is green.

Why so many

Styloviz ships 169 components. A component is not one behaviour; it is every state it can be in, multiplied by keyboard, screen reader, dark mode, right-to-left text and the data arriving late, empty or wrong. Most of the tests are of the boring kind: a button with [loading] set is not clickable, a select announces its options, a table keeps its scroll position when a row is added.

The count is not the point. What matters is whether a test would fail if the thing it describes broke. Coverage tells you a line ran; it does not tell you anyone checked what it did. So every new behaviour gets a test that is first run against the code without the fix, and has to fail there.

What the gate caught this week

A real bug, in a test that kept failing for the wrong reason

The drawer has an unsaved-changes guard: dismiss a drawer with edits in it and it asks first, with focus on "Keep editing". The release gate failed a test of exactly that, once, under load. Re-running would have passed. Reading it instead showed the drawer moves focus into itself 60 milliseconds after opening, and when the prompt appeared inside that window, the late focus moved back to the close button. A user pressing Enter would have closed the drawer and lost their edits. The fix is three lines; the test that proves it waits past the 60 ms window and fails without them. It shipped in 1.0.1.

Three tests that were wrong, not the code

A tree with 1,500 rows took 1 to 6 seconds to render in a test on an idle machine and up to 98 seconds while the coverage run shared the laptop, against a 30-second limit. A product-tour test gave a missing target 150 ms and asserted the tour was still waiting; on a busy machine, setting the test up took longer than that. And the shared until() helper declared that a 20 ms debounce "never arrived" after two seconds of wall-clock time, in a test that took 16.5 seconds because the worker had been starved. Each was fixed at the cause: a budget sized for the claim, a wait that outlasts setup, and a helper that only gives up once the event loop has actually had its turns.

A gap in a promise

Writing the security page meant checking that npm attaches build provenance to the free packages, as the release workflow's comments said. It does not, for packages published from a private repository. The page now says what is true, and the free packages now publish from their public repository, so provenance arrives with the next release.

The gates nobody sees

Tests check behaviour. The static gates check the things a test would not think to ask:

check:contrast measures every text and background pair against WCAG AA, in light and dark mode.
check:ssr-safety fails any component that touches window or document where server rendering would crash.
check:collection-keyboard proves every list, grid and tree has exactly one tab stop and arrow-key movement, at 1,500 rows.
check:date-math runs the date arithmetic specs in five time zones, including Lord Howe Island's half-hour daylight saving.
check:marketing fails the build when a number on the website, in the docs or in an article like this one stops matching the kit.

That last one exists because a website still quoting last quarter's component count is a small lie, and small lies are the ones nobody fixes.

Read the tests yourself

The free packages' source and their specs are public. Pick a component you would use, open its *.spec.ts, and see whether the tests describe what you would have checked.

github.com/styloviz/styloviz — The free packages, their specs and the CI that runs them on every push. 92 free components, MIT.

Originally published at https://styloviz.dev/blog/what-the-tests-in-a-ui-kit-look-like.

Choosing an Angular UI component library in 2026

Tue, 18 Aug 2026 00:00:00 GMT

Choosing a component library is a five-year decision made in an afternoon. It determines your accessibility floor, your theming ceiling, how much of your bundle you control, and — since 2026 — whether you have a licence to renew. This is an attempt at an honest survey of the field, including where each option beats the one we build.

Verified 18 August 2026
Prices come from each vendor's own pricing page on 18 August 2026. Download counts are a one-week snapshot (28 September – 4 October 2026) from the npm registry API, taken on 7 October 2026. All are linked at the end. Both move; re-check before deciding.

The field at a glance

Angular component libraries; weekly downloads for 28 September – 4 October 2026. "Source shipped" means you can read and patch the code you install.
Library	Licence	Tailwind-native	Source shipped	Weekly downloads
Angular Material	MIT, first-party	No	Yes	3,000,263
PrimeUI (formerly PrimeNG)	Commercial, gated free tier	Partial	No, compiled	943,630
ng-zorro-antd	MIT	No	Yes	601,963
@angular/aria (headless primitives)	MIT, first-party	Unstyled	Yes	115,153
spartan-ng	MIT	Yes	Yes, copy-paste	86,451
Optimus UI (PrimeNG community fork)	MIT	Partial	Yes	36,746
flowbite-angular	MIT	Yes	Yes	193
Styloviz	MIT free tier, commercial Pro	Yes	Yes, both tiers	Pre-launch

Two things stand out. Angular Material is roughly twice the size of everything else combined and is not going anywhere. And the Tailwind-native column is nearly empty — most Angular libraries were designed before Tailwind became the default styling approach, and retrofitting it is harder than it sounds.

Angular Material — the default, and often the right one

First-party, MIT, maintained by the Angular team, and by far the most used. It moves with the framework, its accessibility work is serious, and nobody has ever been criticised for choosing it.

Where it stops: it implements Material Design, and making it look like something else is a fight you will keep having. It is not Tailwind-native. And its component set targets the common cases — if you need a Gantt chart, a pivot table or a kanban board, you are building or buying those separately regardless.

Choose Material when
Material Design is acceptable or desirable, you want a first-party dependency with no licence question ever, and your component needs are mainstream. This is the correct default and the burden of proof is on anything else.

PrimeUI — breadth, now with a licence

The largest component set in the Angular ecosystem, and the one most teams already know. Since 2026 it is commercially licensed: $799 per developer, $599 during a launch period ending 31 December 2026, and $399 per developer to renew updates for a further year. There is a free Community tier requiring under $1M revenue, fewer than 5 developers, fewer than 10 employees and under $3M raised — all four. Packages ship compiled rather than as source, and several components including the Scheduler, Text Editor, Charts and Task Board are priced separately on top.

Downloads have not fallen: PrimeNG was at around 944,000 a week at the start of October 2026. Whatever teams are deciding, most of the installed base is still on it.

Choose PrimeUI when
You already use PrimeNG heavily and migration would cost more than the licence — which for a large application is common. Or when you need its breadth and are comfortable with a per-developer annual model and a compiled dependency.

spartan-ng — you own the code

Unstyled primitives plus copy-paste Tailwind components, in the shadcn/ui tradition. MIT, signals-first, and the components land in your repository rather than your node_modules, so you can change anything without waiting for a maintainer.

The cost is that you maintain them. Copy-paste means no upgrade path: a fix upstream is a manual re-copy, and after a year of local edits it may not apply cleanly. The component set is also smaller than the commercial kits, so the data-heavy widgets are yours to build.

Choose spartan-ng when
You have a real design system, a team that wants to own its component layer, and mostly need form and overlay primitives rather than data grids and schedulers.

@angular/aria — Google blessing the headless approach

Introduced in Angular 21 as developer preview and generally available in Angular 22, this is a first-party package of accessible headless primitives — behaviour and ARIA without styling. It is the framework saying, in effect, that "pre-styled components" and "precise design specifications" are two different needs and it will serve both.

For anyone building or buying a Tailwind-styled Angular library, this matters: the hardest and least visible part of a component library is keyboard behaviour and ARIA state, and there is now a first-party, supported implementation of it.

ng-zorro-antd — large, MIT, and not Tailwind

An Ant Design implementation for Angular, MIT licensed, with a genuinely large component set and steady usage at around 600,000 weekly downloads at the start of October 2026. If you want breadth without a licence and can live with Ant Design's visual language, it deserves a look that it rarely gets outside China.

It is not Tailwind-native and its theming is its own system. Signals adoption is partial.

The ones to check the pulse of first

flowbite-angular is at around 190 weekly downloads. Optimus UI, the community fork of the last MIT PrimeNG, is at around 36,700 and is doing real work but is volunteer-run. Neither is disqualifying on its own — but before adopting any library, look at its release cadence and open-issue count yourself rather than at its landing page. A library that has not released since the last Angular major is a library you will be maintaining.

The questions worth asking of any candidate

What licence, and does the free tier have revenue, headcount or funding thresholds I could cross without noticing?
Do I get the source I can read and patch, or compiled packages?
Is the cost one-time or per developer per year, and what is the three-year figure at my real headcount?
Does anything change in my running application if a licence key is missing or expired?
What is the keyboard and screen-reader story, and is it tested or merely claimed?
How fast did it support the last Angular major, and how do I know?
If the maintainer stops, what is my exit? Copy-paste and MIT source are exits; a compiled dependency is not.

Where Styloviz fits, and where it does not

Styloviz is Angular-native, Tailwind 4, signals-first, no Material dependency: 169 components, of which 92 are free under MIT with no thresholds, and 21 templates of which 3 are free. Pro ships with source, is bought once for a team rather than per developer per year, and nothing in it behaves differently without a key.

Where it does not fit: it is newer than everything else in this table, so it has less community, fewer Stack Overflow answers and no decade of production hardening. If you need the reassurance of the most-trodden path, Angular Material is that path and this is not. If you are already deep in PrimeNG, migrating here is real work and paying PrimeTek may well be cheaper. We would rather you did the arithmetic than took our word.

Sources: prices checked 18 August 2026, downloads 7 October 2026

npm registry download API — Every download figure in this article. Swap the package name to check any of them.
PrimeUI pricing — Per-developer, launch, renewal and standalone component prices.
PrimeUI Community licence — The four eligibility thresholds.
Angular Aria — official guide — First-party headless primitives, generally available in Angular 22.
spartan/ui documentation — Copy-paste model and CLI.
What is new in Angular 22 — Ninja Squad — Release date, OnPush default, Signal Forms, @angular/aria GA.

Originally published at https://styloviz.dev/blog/choosing-an-angular-ui-library-2026.

Introducing the Styloviz blog

Tue, 18 Aug 2026 00:00:00 GMT

Styloviz is a Tailwind 4 UI kit for Angular 21 and 22: 169 components, 21 templates, and a free tier that is MIT licensed with no revenue or headcount thresholds. This is where the writing about it will live.

What goes here

Three kinds of article, and nothing else. Explainers about changes in the Angular component-library ecosystem that developers have to make decisions about. Migration guides with real API mappings rather than marketing comparisons. And engineering write-ups from building the kit, where the technique is worth more than the product mention.

Ecosystem explainers — what changed, what it costs, and what the options are, including the ones that are not us.
Migration guides — component-by-component mappings you can paste, with the API differences called out.
Engineering notes — how a thing was built, what broke, and what the fix generalises to.

How these are written

Every figure quoted about Styloviz is derived from the repository rather than asserted by hand. The component counts come from the package manifest, the test numbers from the suite, and the prices from the payment provider — so a number in an article cannot drift away from the number the build produces without a check failing.

Figures about anyone else carry a linked source and the date they were checked. Prices change and download counts move; an article that quotes them without saying when is asking to be believed about something it cannot know.

On comparisons
Comparison articles here name the alternatives honestly, including where another library is the better answer. A page that only concludes in its own favour is a sales page, and readers can tell.

Start here

Component documentation — Every component, with live demos and a StackBlitz button.
Pricing — One-time purchase, perpetual licence, optional renewal.
Accessibility statement — Which checks run, what they cover, and where they stop.

Originally published at https://styloviz.dev/blog/introducing-the-styloviz-blog.

What a perpetual licence with an update window actually means

Tue, 18 Aug 2026 00:00:00 GMT

Software licences are read once, at purchase, when everyone is optimistic. The differences between them only become visible at the awkward moments: when a renewal invoice arrives, when a developer leaves, when someone runs a fresh install two years later and the build fails. This article is about those moments.

The three models, and what happens when you stop paying

How each licensing model behaves after you stop paying.
Model	While paying	After you stop
Subscription	Full access to the product and updates.	Access ends. Builds may fail, and in some products the running application degrades.
Perpetual with an update window	Full access to the product and updates.	You keep and can install everything published during your window, forever. You do not receive anything newer.
Perpetual, unlimited updates	Full access.	Nothing changes; you keep receiving updates.

The middle row is the one most developer tools use, and it is the one most often misunderstood — usually as the top row. The distinction matters most for the scenario nobody plans for: a project that goes quiet for eighteen months and then needs one small change. Under a subscription, that change starts with a purchase. Under a perpetual licence, it starts with npm install.

The question to ask any vendor
"If I stop paying, can I still run a clean install of the version I paid for, on a new machine, in three years?" A perpetual licence answers yes. A subscription usually answers no. The answer is rarely on the pricing page.

How Styloviz implements it

Styloviz Pro is a perpetual licence with an update window. The mechanism is worth explaining precisely, because "you keep what you bought" is easy to write and harder to actually build.

Your licence key never expires. There is no expiry date in it, and nothing in the components reads one.
A 12-month plan gives you twelve months of updates. A lifetime plan has no cutoff at all.
When your window closes, the private registry filters the package metadata it serves your key so that it lists only versions published on or before your cutoff.
npm then resolves against that filtered list and installs the newest version you are entitled to. It never sees the newer ones, so there is nothing to fail on.
Renewing extends the cutoff. Nothing is re-downloaded and nothing is re-keyed.

The practical consequence: a lapsed licence is not a broken build. It is a build that resolves to the last version you were entitled to — the same one it resolved to the day your window closed. A fresh clone on a new laptop three years later installs and compiles.

It fails open, on purpose
If the registry cannot determine when a version was published, it keeps that version rather than withholding it. A data gap should never quietly deny someone a version they paid for. That is a deliberate choice about which way to be wrong.

What does not happen

Nothing in a Styloviz component checks a key at runtime. There is no banner, no watermark, no console warning and no degraded mode in your application if a key is absent, wrong or expired. The licence is enforced at install time, at the registry, and nowhere else.

This is worth checking with any commercial UI vendor, because the alternative is a licence term that permits your production application to display a notice to your users about your billing status. Read that clause specifically. It is a question about what your customers might see, not about what you owe.

Seats, and what counts as one

Styloviz is licensed per team, not per developer per year. A Personal licence covers one developer; Team covers ten; Enterprise covers twenty-five. A seat is a developer who builds with the Pro packages — not a designer reviewing a pull request, not a CI runner, and not an end user of what you ship.

Styloviz Pro list prices, read from the payment provider when this page was built. Check the pricing page for any current offer.
Tier	Seats	12 months of updates	Lifetime updates
Personal	1	$149	$249
Team	10	$449	$799
Enterprise	25	$999	$1,749

The per-seat arithmetic is the part worth doing yourself: a Team licence at $449 covering 10 developers is a tenth of that per developer, once, with twelve months of updates — and the licence does not lapse into unusability afterwards.

And the free tier has no thresholds

92 of the 169 components are MIT licensed, with no revenue cap, no employee count, no developer limit and no funding condition. 3 of the 21 templates are free on the same terms. MIT means what it always means: use it commercially, modify it, ship it, and you owe nothing and re-confirm nothing.

That is a deliberate contrast with conjunctive free tiers, which require you to satisfy every one of several conditions and to re-confirm annually that you still do. A threshold you can cross without noticing is a licence risk carried by whoever forgot to re-check.

Read the actual terms

Styloviz licence — The full text, including the seat definition and the refund terms.
Pricing — Current prices, including any live launch discount and its end date.

Originally published at https://styloviz.dev/blog/perpetual-licence-update-window-explained.

PrimeNG is no longer open source: what changed, what it costs, and your options

Tue, 18 Aug 2026 00:00:00 GMT

If you build Angular applications, there is a reasonable chance one of them depends on PrimeNG. It has been one of the most widely used Angular component libraries for a decade, and until 2026 it was MIT licensed. That changed. This article sets out exactly what changed, what it now costs, and what your realistic options are.

Prices verified 18 August 2026, download counts 7 October 2026
Prices and thresholds are quoted from primary sources on 18 August 2026; download counts are a snapshot of one week, taken from the npm registry API on 7 October 2026. All are linked at the end. They will change. Check the source before relying on any of them.

What actually changed

PrimeTek archived the PrimeNG repository and continued the work under a new name, PrimeUI, on a commercial licence. The last MIT-licensed release remains MIT — an existing licence cannot be revoked retroactively — so the version you already depend on stays free forever. What is no longer free is everything published after it.

The MIT-licensed PrimeNG releases you already use remain MIT, permanently. Nothing about your current installation changes.
The successor, PrimeUI, ships under a commercial licence with a restricted free Community tier.
PrimeUI packages are distributed compiled, without source, which is a meaningful practical difference from an MIT dependency you can read and patch.
The commercial licence contemplates the software displaying a licence notice where a key is missing or invalid.

The part that catches teams out
Nothing breaks on the day of the change. Your build keeps working, your pinned version keeps installing, and there is no error anywhere. The decision only becomes urgent the first time you need a fix, a new component, or an Angular-version bump — which is exactly when it is least convenient to make it.

The price list, in full

PrimeUI is sold per developer, as a perpetual licence with one year of updates included. After that year, updates stop unless you renew; the version you hold keeps working.

PrimeUI commercial pricing, verified from primeui.dev/pricing on 18 August 2026.
Item	Price	Terms
Commercial, per developer	$799	Perpetual, 1 year of updates included
Commercial, launch price	$599	Discounted rate, launch period ends 31 Dec 2026
Renewal	$399 per developer	Extends updates by one further year
Site licence	Quote	No seat cap, perpetual, 1 year of updates
Scheduler (standalone Pro)	$799 per developer	Perpetual, 1 year of updates
Text Editor (standalone Pro)	$499 per developer	Perpetual, 1 year of updates
Charts and Task Board (standalone Pro)	$399 per developer	Perpetual, 1 year of updates

The standalone Pro components are worth noticing, because they are priced separately from the main licence. A team that needs the Scheduler is looking at the per-developer commercial licence plus a second per-developer figure for that one component.

What that means over three years

Per-developer, per-year pricing compounds in a way a single sticker price does not show. For a team of ten, buying at the launch rate and renewing for two further years, the arithmetic is ten times $599, then ten times $399 twice.

Three-year cost for a ten-developer team. Arithmetic from the prices above.
Scenario	Year 1	Years 2 and 3	Three-year total
Bought at the launch rate, renewed	$5,990	$7,980	$13,970
Bought at list after 31 Dec 2026, renewed	$7,990	$7,980	$15,970
Bought once, never renewed	$5,990	$0	$5,990 — and no updates after year one

The free tier, and who actually qualifies

PrimeUI has a Community tier at no cost. The eligibility is conjunctive — you must satisfy every condition, not any one of them.

Under $1M in annual revenue.
Fewer than 5 developers.
Fewer than 10 employees.
Under $3M in venture funding raised.

It covers individuals, students, non-profits and non-commercial open source. Read the conditions carefully against your own organisation before assuming you qualify: a company with eleven employees and no revenue is outside the tier, and so is a well-funded startup with three developers. The thresholds are also the kind of thing a company crosses without noticing, which makes this a licence you have to re-check rather than set and forget.

Is anyone actually leaving?

This is the question worth asking before you decide anything, and it has a measurable answer. npm publishes download counts, so here is what they say rather than what anyone claims.

Weekly npm downloads for 28 September – 4 October 2026, from the npm registry API on 7 October 2026. One week's snapshot, not a trend.
Package	Weekly downloads
@angular/material	3,000,263
primeng	943,630
ng-zorro-antd	601,963
@angular/aria	115,153
@spartan-ng/brain	86,451
@openng/optimus-ui (the MIT community fork)	36,746
flowbite-angular	193

PrimeNG remains one of the most-installed Angular component libraries by a wide margin, at around 944,000 downloads in that week. The first version of this article compared two August weeks and described a fall; later figures did not bear that out, so the claim is gone. What the registry supports is a level on a given week, and that is all this table states.

Read download counts carefully
npm counts installs, not developers or applications. CI pipelines, Docker builds and mirrors all register, so the absolute numbers overstate real usage, and weekly counts swing with release and CI cycles. Two snapshots are not a trend, and none of these numbers is a headcount.

The community fork, Optimus UI, is at around 36,700 weekly downloads in the same week — real usage, and just under 4% of PrimeNG's count. Most PrimeNG installs have not moved to it.

Your options, including the ones that are not us

There are five realistic paths. Which is right depends far more on your team size, your update appetite and your tolerance for compiled dependencies than on anything a vendor says.

1. Stay on the last MIT release

Free, permanent, and requires nothing from you today. You keep an MIT licence and full source. What you give up is future Angular-version support, security fixes and new components. This is the right answer for an application in maintenance, or one on a fixed Angular version with a known end of life. It is a poor answer for an application you expect to move to Angular 23 and beyond.

2. Pay PrimeTek

The path of least disruption by a wide margin. Your imports, your API knowledge, your theming and your team's muscle memory all survive; you are buying continuity. It is the right answer when migration cost exceeds licence cost — which for a large application with deep PrimeNG usage it very often does. Do the arithmetic on your real headcount over three years rather than the first-year figure, and check whether you need any of the separately priced Pro components.

3. Move to the community fork

Optimus UI continues the last MIT codebase under the original licence. It keeps your API and it keeps your source. The honest caveat is that a volunteer fork is not a support contract: the question is not whether the code works today but who will do the Angular 23 compatibility work, and how quickly a security issue gets a release. Check its issue tracker and commit cadence yourself before betting a product on it.

4. Move to a headless or copy-paste library

spartan-ng gives you unstyled primitives and copy-paste components with Tailwind styling, MIT licensed, and you own the code once it is in your repository. Angular Material remains free, first-party and enormous. Google's own @angular/aria package now ships accessible headless primitives as a supported part of the framework. This path costs the most engineering time and buys the most control; it suits teams with a design system and the appetite to maintain their own component layer.

5. Move to a different commercial kit

Including this one. The relevant questions are the same ones you should have asked PrimeUI: do you get the source, is the free tier usable without thresholds, is the pricing per developer per year or one-off, and does anything in the product change behaviour if a licence key is absent. Ask them of every candidate, including Styloviz.

A way to decide

Count how many developers actually need a licence — usually fewer than the whole team. Multiply by three years, not one.
Check the Community thresholds against your organisation honestly, including where you expect to be in eighteen months.
Estimate the migration cost of your ten most-used components. If it is under the three-year licence cost, migrating is the cheaper path; if not, paying is.
Decide whether shipping a compiled dependency you cannot read or patch is acceptable in your codebase. For some regulated environments it is not, and that decision is made for you.
Whichever way you go, pin your versions and write down the decision and its date. The next person will need to know why.

Where Styloviz fits, stated plainly
We are an alternative, not a drop-in replacement — the APIs are different and a migration is real work. Our free tier is MIT with no revenue, headcount or funding thresholds, Pro ships with source, and Pro is a one-time purchase for a team rather than a per-developer annual fee. If your blocker is a compiled dependency or a per-seat renewal, that is the part worth comparing. If your blocker is migration effort, paying PrimeTek is very likely cheaper and we would rather say so.

Sources: prices checked 18 August 2026, downloads 7 October 2026

PrimeUI — pricing — Per-developer, launch and renewal pricing; the standalone Pro component prices.
PrimeUI — Community licence — The four eligibility thresholds, verbatim.
PrimeUI — Commercial licence — Perpetual terms, update window, licence-notice provision.
PrimeUI — The Next Chapter of PrimeTek — PrimeTek's own account of the change.
openng.org — PrimeNG is no longer open source — Community write-up, and the home of the Optimus UI fork.
npm registry download API — The download figures quoted above; re-run it yourself.

Originally published at https://styloviz.dev/blog/primeng-is-no-longer-open-source.

Why use Styloviz? An honest case, and the cases against

Tue, 18 Aug 2026 00:00:00 GMT

This is the page where a vendor normally lists adjectives. Instead, here is what Styloviz is in numbers you can check, the four things that actually distinguish it, and an honest account of when you should choose something else.

What it is, in figures

Derived from the repository at render time, not typed into this article. The counts are generated from the package manifest and asserted by a build gate.
	Figure
Components	169 — 92 free, 77 Pro
AI-pack components (part of Pro)	20
Published packages	107 — 53 free, 54 Pro
Templates	21 — 18 Pro, 3 free
Tests	Every component ships a spec file; the suite runs on every build
Machine-enforced build gates	Counts, pricing, accessibility, contrast, tier leaks, bundle size, sitemap
Framework	Angular 21 and 22, Tailwind 4, standalone, signals, OnPush

Why these numbers are checkable
Every count on this page is interpolated from the same generated constant the pricing page and the documentation read, so this article cannot claim a number the build disagrees with. It changes when the kit changes. That is a deliberate defence against exactly the drift that makes vendor figures untrustworthy.

The four things that actually differ

1. You get the source, in both tiers

Free and Pro packages both ship readable source. You can open a component in node_modules, understand what it does, and patch it if you need to. This is unremarkable for MIT libraries and increasingly not the norm for commercial ones — PrimeUI, for example, distributes compiled packages. For regulated environments and for anyone who has ever had to fix a dependency at 2am, this is the difference that matters most.

2. The free tier is MIT with no thresholds

92 components under MIT. No revenue cap, no headcount limit, no funding condition, no annual re-confirmation. Compare that with conjunctive free tiers requiring you to be under $1M revenue and under five developers and under ten employees and under $3M raised, all at once — thresholds a growing company crosses without anyone noticing.

3. One-time, per team, not per developer per year

A Team licence covers 10 developers for $449 with twelve months of updates, or $799 with lifetime updates — a tenth of either per developer, once. The licence is perpetual: when an update window closes you keep installing what you paid for, forever. Nothing in the components checks a key at runtime, so your application never displays anything to your users about your billing.

4. Every component ships its awkward states

Loading, error, empty and retry, plus a data-source contract, on every component that displays data — rather than a demo that takes a hardcoded array and leaves the four states you actually need in production as an exercise. 21 composed templates ship too — admin, AI ops, storefront, help desk, point of sale, HR, learning and more, with free auth, error and account screens. The gap between "a component library" and "a working screen" is where most of the time goes, and that gap is what the templates are for.

On accessibility, specifically

Accessibility is the easiest thing for a vendor to claim and the hardest to verify. So rather than a claim: keyboard operation is enforced by lint rules that fail the build, contrast pairs are checked against their WCAG AA thresholds in both light and dark themes by a build gate, and there is a public accessibility statement that names the specific mechanisms and, more usefully, states where they stop.

Read that statement before believing any of this. A vendor that tells you where its accessibility work ends is more useful than one that implies it does not.

When you should choose something else

These are real, and we would rather you hit them here than three weeks into an integration.

You are already deep in PrimeNG. Migration is real engineering work. If it costs more than the licence, paying PrimeTek is the cheaper answer and the arithmetic is yours to do.
You want the most-trodden path. Angular Material has over two million weekly downloads, a decade of production hardening and an answer on Stack Overflow for everything. Styloviz is new and has none of that.
You have a mature design system and want to own your component layer. spartan-ng or @angular/aria will suit you better than any pre-styled kit, including this one.
You are not using Tailwind. Styloviz is Tailwind 4 throughout; without it you are fighting the grain.
You need one specialist widget and nothing else. Buying a single best-in-class component is usually better value than a kit you will use ten percent of.

When it is a good fit
You are building a dashboard, admin panel, CRM or internal tool in Angular with Tailwind; you want composed screens rather than only primitives; you would rather buy once for the team than renew per developer; and you want to be able to read the code you depend on.

How to evaluate it without paying

Install a free package. 92 components are MIT — no signup, no key, no trial clock.
Open a component in node_modules and read it. That tells you more about a library in ten minutes than any documentation site.
Open a demo in StackBlitz from the docs and change something.
Check the accessibility statement against your own requirements, especially the section on what is not covered.
Then, and only then, look at the price.

Next steps

Browse the components — Live demos, full API tables, and a StackBlitz button on the free ones.
Templates — The 21 composed templates, 3 of them free.
Accessibility statement — Mechanisms, enforcement, and the stated limitations.
Licence — MIT free tier; perpetual Pro with an update window.
Pricing — Current prices and any live launch discount.

Originally published at https://styloviz.dev/blog/why-use-styloviz.