Angular 21 & 22 · Tailwind 4 · v1.0.2

Not a demo. Wired to your backend.

Every data component wires to your real backend out of the box: loading, error, retry and empty states included. No fixture-only screenshots, no “wire it up yourself” homework left in the README.

components
169
packages
107
app templates
21
tests
more than 29,000
Angular
21 & 22

The four states, on one component

Rows arrive keyed by id, so a refetch patches the table instead of rebuilding it.

See how it wires up Browse 169 components
$ npm i @styloviz/all

92 components free under MIT · no account needed · Pro from a one-time licence

200 · /api/orders Ready

Revenue · 7d

$84,204

CustomerAmount

Amara Osei

#4021 · Paid

$1,240

Tobias Lang

#4020 · Pending

$486

Wei Zhang

#4019 · Paid

$2,910

Sofia Bruni

#4018 · Paid

$755

Keyed by id — a refetch patches rows in place.

… · /api/orders Loading
CustomerAmount

Skeleton keeps the real layout — nothing shifts when data lands.

503 · /api/orders Error

Couldn’t load orders

Service unavailable. The table kept your filters, so nothing you typed is lost.

retryable · try it, it really refetches

200 · 0 rows Empty

No orders yet

A first-run empty state — worded differently from “no results matched your filter”.

emptyMessage · yours to override

@styloviz/core

one shared state contract

One component · four states

Showing the Ready state

Components
169 92 free · 77 Pro
App templates
21 3 free · 18 Pro
AI Pack components
20 Included in every licence
Icons
687 174 free · line and solid
01 Backend wiring

One contract. Every state.

Components stay headless and speak a shared contract from @styloviz/core. The adapter is opt-in sugar — bring your own fetch and the states still work.

Step 1

Your API

Whatever you already have. REST, GraphQL behind a fetch, a BFF — the kit never dictates the shape.

GET /api/orders?limit=20

Step 2

@styloviz/data

One adapter writes the debounce, the request guard, the abort and the retry policy you would otherwise hand-roll per table.

createHttpDataSource({ url })

Step 3

The component

Stays headless. It speaks the shared contract from @styloviz/core, so the four states render themselves.

<sv-data-table [svDataSource]="…" />
orders.component.html
<sv-data-table  [svDataSource]="orders" #src="svDataSource"  [columns]="columns"  [rows]="src.items()"  [loading]="src.loading()"  [error]="src.error()"  emptyMessage="No orders yet"  (retry)="src.reload()" />

Highlighted: the binding that owns the Ready state above. Every attribute here exists on sv-data-table.

What you don't write

  • Request guardsA slow first response can no longer overwrite a fast second one.
  • Debounced queriesTyping in a search box does not fire a request per keystroke.
  • Abort on unmountNavigating away cancels in-flight work instead of setting state on a dead view.
  • Retry policyRetryable statuses surface a button; terminal ones do not pretend they can recover.
  • Stable identityRows track by key, so a refetch patches the DOM rather than rebuilding it.
Read the backend guide

88

components enforce the contract

Each one declares loading, error and retry, and a gate fails the build if one stops. Free/Pro twins are counted once.

5

shared state shells

skeleton · error · empty · chart-frame · connection-status — written once in @styloviz/core, not re-invented per component.

0

third-party runtime dependencies

The adapter is plain fetch/HttpClient. No data-layer library to adopt, and nothing to rip out later.

02 Ready-to-use templates

21 complete apps. Download one and run it.

Not screenshots — working apps built from the same components you install. Preview any of them live, then download it as a runnable Angular project. Auth, Errors and Account are free.

Ship an admin panel this afternoon

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).

  • 10 dashboards
  • 49 pages
  • Dark mode
Open the live demo Downloads & details

Every template

Support agentrun #812
  1. Refund order #4021 and email the customer.
Built from Agent Approval AI Chat Interface Reasoning Trace Tool Call Card
04 Try it

The real component, not a picture of one

Every control below sets a real input. Copy the code and it compiles — or open the full playground.

variant
btnStyle
size
shape
Options
@styloviz/button
<sv-button
  label="Get started"
  icon="sparkles"
  (clicked)="start()"
/>
05 Proof, not promises

Built to be checked

Every number on this page is generated from the repository, and each claim below is a gate that fails the build.

  • 1,250+

    spec files

    Every component has a spec. Unit tests run in Vitest; end-to-end and axe checks run in Playwright on Chromium and WebKit.

  • 59

    static gates in npm run verify

    Contrast pairs, SSR safety, icon names, pricing honesty, the sitemap and the async data contract are each a build failure, not a guideline.

  • 80

    UI and accessibility rules

    check:ui reads every library template: contrast pairs, focus restoration, keyboard reach, ARIA, names a screen reader can say. A breach fails the build.

  • 107

    per-package bundle budgets

    The gzipped size of every published package is on record, and a package that outgrows its record fails the build instead of quietly reaching your users.

  • Angular 21 & 22

    supported majors

    The published peer range is proved on each major with a fresh install, a strict typecheck and the linker over every bundle.

  • WCAG 2.1 AA

    conformance target

    Keyboard support, visible focus and ARIA on every widget, with the known limits written down rather than hidden.

    Read more

  • 0

    third-party runtime deps

    Pure Angular and Tailwind CSS 4. No Angular Material, no charting or data-layer library, no external API calls.

  • 14 days

    refund window

    If Styloviz is not the right fit, email within two weeks of purchase for a full refund.

    Read more

Latest release · 2026-10-14

v1.0.2

24 changelog entries

19 fixed 3 changed 2 deprecated

  • FixedSplit button: its outer corners are round again (Pro)
  • FixedLive spline chart and Sankey value labels meet WCAG AA contrast (Pro)
  • FixedSidebar, sidebar nav and footer labels meet WCAG AA contrast
  • FixedFaded secondary text meets WCAG AA contrast (Pro AI Pack, product tour, templates)
  • FixedFile upload: resume bookmarks are versioned (Pro)

Engineering standards

  • Standalone
  • Signals
  • OnPush everywhere
  • Strict TypeScript
  • SSR-safe
  • Dark mode via tokens
  • Tree-shakeable
  • Scripts allowed by CSP hash
06 Plans & questions

Start free. Go Pro when it pays.

Free · MIT

$0

Public npm, no account

  • 92 components under MIT
  • 174 icons
  • 3 templates — Auth, Errors and Account
  • Dark mode, accessibility and backend wiring
$ npm i @styloviz/all

Pro · one-time

Everything

Personal, Team or Enterprise seats

  • All 169 components
  • The AI Pack — 20 components
  • All 21 templates, downloadable as runnable projects
  • 687 icons, line and solid
  • 12 months of updates, or lifetime
  • Perpetual licence, unlimited client projects
See pricing Compare every component, free vs Pro

Angular 21 and 22, with Tailwind CSS 4. Angular and Tailwind are peer dependencies, so you control the exact versions. Every component is standalone, signal-based and uses OnPush change detection.

Ship the dashboard, not the plumbing.

Install the free tier in one command, or take the whole kit — every component, the AI Pack and all 21 templates.

See plans & pricing Browse components Read the docs

The free tier is public on npm — no account needed. Pro adds the Pro components, the AI Pack and the Pro templates.

  • Angular 21 & 22
  • Tailwind CSS 4
  • TypeScript strict
  • Standalone
  • Signals
  • SSR-safe