@styloviz/core

Core utilities, services, directives and design tokens shared by every Styloviz component.

Part of the Styloviz UI Kit — a premium Angular 21 & 22 + Tailwind CSS 4 dashboard component library.

@styloviz/core is the shared services and theming layer — ThemeService (dark/light), ToastService, the provideStyloviz() config token, design-token directives and the kit stylesheet (@styloviz/core/styles/styloviz.css — see Styles below). Most Styloviz packages list it as a peer dependency, so npm installs it alongside them; on pnpm and yarn add it yourself. It's included automatically in the @styloviz/all bundle.

Installation

npm install @styloviz/core

Requires @angular/core and @angular/common 21 or 22 (peer range >=21.0.0 <23.0.0).

Styles (required)

Styloviz components are Tailwind CSS 4 utilities. If the project does not use Tailwind yet, add it and its PostCSS plugin (the Angular CLI reads .postcssrc.json from the project root):

npm i -D tailwindcss @tailwindcss/postcss postcss
echo '{ "plugins": { "@tailwindcss/postcss": {} } }' > .postcssrc.json

Then, in your global stylesheet (usually src/styles.css), import the kit's tokens and let Tailwind scan the installed packages — it skips node_modules otherwise:

@import "tailwindcss";
@import "@styloviz/core/styles/styloviz.css";
@source "../node_modules/@styloviz";
@source "../node_modules/@styloviz-pro";   /* Pro only */

The stylesheet ships in @styloviz/core — add it to your install if it is not there already. Dark mode is class-based (class="dark" on <html>). Rebrand by redeclaring a token after the import: @theme { --color-primary-600: #0f766e; }.

Documentation

https://styloviz.dev/docs

License

MIT