# @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

```bash
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):

```sh
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:

```css
@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