Premium UI .p-titleSuite for Angular

Enhance your web applications with PrimeNG's comprehensive suite of customizable, feature-rich UI components.

Get Started View Components

Overview

Chat

Inbox

Cards

Customers

Movies

Overview Live

Portfolio command

Monitor wallet exposure, settlement flow, and recent crypto activity.

Weekly

Monthly

Yearly

Total balance

+12.4%

Net flow

+8.2%

Open orders

Live

Risk score

Low

Portfolio activity

Recent activity

10 pending

Id	Name	Date	Process	Amount
#1254	AE Amy Elsner	May 5th	Buy	3.005 BTC
#2355	AF Anna Fali	Mar 17th	Buy	0.050 ETH
#1235	SS Stephen Shaw	May 24th	Sell	3.050 BTC

Showing 1 to 3 of 20 entries

Wallet mix

$1.42M

+12.4%

BTC (24%)

27.215

GBP (35%)

£ 147.562,32

USD (41%)

$ 133.364,12

Quick Start

So simple to use

Import a component, pass your data, and you have a production-ready UI. No boilerplate, no setup ceremony.

$npm install primeng

import { SliderModule } from 'primeng/slider'
import { FormsModule } from '@angular/forms'

@Component({
  template: `
    <p-slider [(ngModel)]="value" />
  `
})
export class VolumeControl {
  value = 50
}

Architecture

Built in Layers

Same Dialog, four levels of control. Pick the layer that fits.

import { DialogModule } from 'primeng/dialog'

<p-dialog [(visible)]="visible">
  <ng-template #headless>
    <div class="fixed inset-0 bg-black/50"
      (click)="visible = false"></div>
    <div class="bg-white rounded-xl p-6 shadow-xl">
      <h2>Edit Profile</h2>
      <input pInputText [(ngModel)]="name" />
      <button (click)="visible = false">Close</button>
    </div>
  </ng-template>
</p-dialog>

Theming

Your Design System

Powered by the multi-layered design token archictured. Customize colors, spacing, radius, and more with a single preset or override per component.

radius: 0.5rem

primary: #6366f1

padding: 1.25rem

Edit Profile

Update your account details.

Name

John Doe

[email protected]

Save Changes

Cancel

fontSize: 14px

import { definePreset } from '@primeuix/themes'
import Aura from '@primeuix/themes/aura'

const MyPreset = definePreset(Aura, {
  semantic: {
    primary: { 500: '#6366f1' },
    surface: { 0: '#ffffff', 950: '#09090b' },
    colorScheme: {
      dark: {
        surface: { 0: '#09090b', 950: '#fafafa' },
      }
    },
    formField: {
      borderRadius: '0.5rem',
      paddingX: '0.75rem',
      fontSize: '14px',
      shadow: '0 1px 2px rgba(0,0,0,0.05)',
    },
  }
})