⚡ ParallelUI Angular

ParallelUI Angular is a modern, full-featured component library built for Angular. It provides a complete set of reusable, customizable UI components designed to help developers create beautiful and consistent interfaces with ease.

Focused on performance, accessibility, and simplicity, ParallelUI Angular allows teams to build Angular applications faster while maintaining a clean and scalable architecture. Each component is thoughtfully designed to follow best practices, ensuring visual harmony and a smooth user experience across devices.

With ParallelUI Angular, you can focus on building your product instead of reinventing the UI — bringing clarity, flexibility, and power to every Angular project.

✨ Highlights

• 80+ production-ready components covering forms, data, navigation, overlays, charts, media and more.
• Theme system with multiple built-in themes (e.g. lara-light-purple, lara-light-blue, lara-dark-*) and full support for custom themes.
• Accessibility first — components follow WAI-ARIA practices and ship with keyboard support out of the box.
• Tree-shakable, per-module imports — bundle only the components you use.
• SSR ready — works with Angular Universal / @nguniversal/express-engine.
• TypeScript native with strict typings for every public API.
• Composable & responsive — designed to integrate naturally with Angular Forms, Router, RxJS and Signals.

📦 Installation

Install the library from npm:

npm install @qius.solutions/parallel-ui-angular

Optional peer packages used across the showcase (icons and flex utilities):

npm install @qius.solutions/parallel-ui-icons @qius.solutions/parallel-ui-styles

Peer dependencies

ParallelUI Angular supports Angular 15 and above — no upper bound, so it stays compatible with future Angular releases.

| Package | Supported range | | -------------------------------------- | --------------- | | @angular/core / common / forms | >=15.0.0 | | @angular/animations | >=15.0.0 | | @angular/router | >=15.0.0 | | @angular/platform-browser(-dynamic) | >=15.0.0 | | rxjs | >=6.0.0 | | zone.js | >=0.10.0 |

🎨 Styles & Theming

Theme and core styles are the required CSS files for the components. You can import them either from angular.json or from your global stylesheet.

angular.json

"styles": [
  "node_modules/parallel-ui-angular/resources/themes/lara-light-purple/theme.css",
  "node_modules/parallel-ui-angular/resources/parallel-ui-angular.min.css"
]

src/styles.scss

@import 'parallel-ui-angular/resources/themes/lara-light-purple/theme.css';
@import 'parallel-ui-angular/resources/parallel-ui-angular.css';

Swap lara-light-purple with any other built-in theme to change the look (e.g. lara-light-blue, lara-dark-purple, bootstrap4-light-blue, mdc-light-indigo).

🎬 Animations

Several components rely on Angular animations. Import BrowserAnimationsModule (or NoopAnimationsModule to disable animations globally) in your root module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    // ...
  ],
})
export class AppModule {}

🚀 Usage

Each component ships as its own entry point so that you bundle only what you use.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ButtonModule } from '@qius.solutions/parallel-ui-angular/button';
import { InputTextModule } from '@qius.solutions/parallel-ui-angular/inputtext';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ButtonModule,
    InputTextModule,
  ],
})
export class AppModule {}

<div class="card flex justify-content-center gap-2">
  <input pInputText placeholder="Your name" />
  <p-button label="Check" icon="pi pi-check"></p-button>
</div>

Standalone components

You can also import the modules directly into a standalone component:

import { Component } from '@angular/core';
import { ButtonModule } from '@qius.solutions/parallel-ui-angular/button';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [ButtonModule],
  template: `<p-button label="Save" icon="pi pi-check" />`,
})
export class DemoComponent {}

🧩 Available components

A non-exhaustive overview of what's available:

• Form: AutoComplete, Calendar, CascadeSelect, Checkbox, Chips, ColorPicker, Dropdown, Editor, InputMask, InputNumber, InputSwitch, InputText, InputTextarea, KeyFilter, Knob, ListBox, MultiSelect, Password, RadioButton, Rating, SelectButton, Slider, ToggleButton, TreeSelect, TriStateCheckbox
• Buttons: Button, SplitButton, SpeedDial
• Data: DataView, OrderList, OrganizationChart, Paginator, PickList, Table, Timeline, Tree, TreeTable, VirtualScroller
• Panel: Accordion, Card, Divider, Fieldset, Panel, ScrollPanel, Splitter, TabView, Toolbar
• Overlay: ConfirmDialog, ConfirmPopup, Dialog, DynamicDialog, OverlayPanel, Sidebar, Tooltip
• File: FileUpload
• Menu: Breadcrumb, ContextMenu, Dock, MegaMenu, Menu, Menubar, PanelMenu, SlideMenu, Steps, TabMenu, TieredMenu
• Chart: Chart.js integration
• Messages: Message, Messages, Toast
• Media: Carousel, Galleria, Image
• Misc: Avatar, AvatarGroup, Badge, BlockUI, Chip, Inplace, ProgressBar, ProgressSpinner, ScrollTop, Skeleton, Tag, Terminal

All components live under src/app/components and are published as individual entry points such as @qius.solutions/parallel-ui-angular/button, @qius.solutions/parallel-ui-angular/table, etc.

🛠 Scripts

| Script | Description | | ----------------------- | ---------------------------------------------------------- | | npm start | Run the showcase app locally (ng serve). | | npm test | Run unit tests with Karma + Jasmine. | | npm run test:headless | Run unit tests in ChromeHeadless (CI friendly). | | npm run lint | Run ESLint over the codebase. | | npm run format | Format files with Prettier. | | npm run format:check | Check formatting without writing. | | npm run build:lib | Run checks and build the publishable library package. | | npm run build:package | Build the library and copy assets via Gulp. | | npm run dev:ssr | Run the showcase with Angular Universal in dev mode. | | npm run build:ssr | Production SSR build. | | npm run serve:ssr | Serve the SSR build from dist/parallel-ui-angular. | | npm run prerender | Pre-render routes with Angular Universal. | | npm run security:check| Audit production dependencies (npm audit). |

🗂 Project structure

parallel-ui-angular/
├── src/
│   ├── app/
│   │   ├── components/          # Library source (published package)
│   │   │   ├── button/
│   │   │   ├── table/
│   │   │   ├── ...
│   │   │   └── public_api.ts
│   │   └── showcase/            # Documentation & demo application
│   ├── assets/
│   │   └── parallel-ui-angular/ # Brand assets, images, themes
│   └── styles.scss
├── api/                         # Express API used by the showcase
├── server.ts                    # Angular Universal entrypoint
├── angular.json
└── package.json

🧪 Testing

Unit tests live next to each component as *.spec.ts files and run with Karma + Jasmine.

npm test                 # interactive
npm run test:headless    # CI mode

We follow the Arrange-Act-Assert pattern and aim for meaningful coverage on services, directives and component behavior.

🌐 Server-Side Rendering (SSR)

The repository ships with an Angular Universal setup based on @nguniversal/express-engine.

npm run dev:ssr       # development with SSR
npm run build:ssr     # production build
npm run serve:ssr     # serve dist/parallel-ui-angular/server/main.js

🤝 Contributing

1. Fork the repository and create a feature branch from main.
2. Run npm install.
3. Make your changes and ensure:
   • npm run format:check
   • npm run lint
   • npm run test:headless all pass.
4. Open a pull request describing the motivation and the change.

For bigger features, please open an issue first to discuss the proposal.

📄 License

Released under the MIT License.

Crafted with care by Qius Solutions — [email protected].