Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt

Use this file to discover all available pages before exploring further.

Nettalco Theme is an Angular library that ships a fully branded PrimeNG preset. It extends PrimeNG’s Aura base using the @primeuix/themes design token system, replacing the default palette with Nettalco’s official Navy, Sky Blue, Cyan, and Warm Orange brand colors — across all 75+ PrimeNG components — with support for both light and dark mode.

Installation

Install the package from GitHub Packages and configure your Angular project.

Quickstart

Wire up the theme preset in your app config and start building in minutes.

Design Tokens

Understand the two-level token architecture: primitives and semantic roles.

Color Palette

Explore every Nettalco brand color swatch and its semantic mapping.

​
Why Nettalco Theme?

Nettalco Theme gives every Angular application built on PrimeNG a consistent visual identity out of the box. Instead of overriding individual component styles with CSS, you get a single preset that:
  • Maps Nettalco’s exact brand hex values to PrimeNG’s semantic color roles (primary, success, warn, info, error).
  • Covers every PrimeNG v21 component with hand-tuned design tokens.
  • Supports light and dark mode through PrimeNG’s standard darkModeSelector option — no extra configuration required.
  • Removes transition flicker on interactive rows and menu items via targeted global CSS overrides.

​
Quick Setup

1

Authenticate with GitHub Packages

Add the @nettalco registry scope to your project’s .npmrc:
.npmrc
@nettalco:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
2

Install the package

npm install @nettalco/nettalco-theme
3

Configure your app

app.config.ts
import { ApplicationConfig } from '@angular/core';
import { providePrimeNG } from 'primeng/config';
import MyPreset from '@nettalco/nettalco-theme';

export const appConfig: ApplicationConfig = {
  providers: [
    providePrimeNG({
      theme: {
        preset: MyPreset,
        options: { darkModeSelector: false }
      }
    })
  ]
};
4

Import PrimeNG styles

main.ts
import 'primeng/resources/primeng.css';
import 'primeicons/primeicons.css';

​
Explore the Component Library

Form Inputs

InputText, Select, MultiSelect, DatePicker, and more — all styled with Nettalco tokens.

Buttons & Actions

Button variants, SplitButton, ToggleButton, SpeedDial — themed to match Nettalco brand.

Data Display

DataTable, TreeTable, DataView, Paginator — with custom row and header token overrides.

Overlays

Dialog, Drawer, Popover, Tooltip, ConfirmDialog — layered modals and floating panels.

Navigation

Menu, Menubar, MegaMenu, Breadcrumb, Steps, Tabs, and Dock components.

Feedback & Misc

Toast, Message, ProgressBar, Skeleton, Badge, Chip, and Avatar.

Build docs developers (and LLMs) love

Get started for freeTalk to us