Skip to main content

Component Catalog

All available Primus UI components — with live HTML, React, and Angular previews.

Base Design System

Every component is built on @primus/ui-core. The HTML tab on each page shows the raw semantic markup — the React and Angular components render identical output. Setup guide →

Layout​

CTR
Container
Centred max-width layout wrapper
STK
Stack
Vertical and horizontal flex stack
GRD
Grid
12-column responsive grid

Forms​

BTN
Button
Primary, secondary, danger, outline, ghost
INP
Input
Text input with label, hint, and error
SEL
Select
Dropdown single and multi-select
CHK
Checkbox
Boolean toggle control
TGL
Toggle
Switch for boolean settings
RDO
Radio Group
Single-choice radio buttons
DTE
Date Picker
Date selection input

Data Display​

BGE
Badge
Status and category label
CRD
Card
Content container with stat variant
TBL
Table
Striped, bordered, hoverable table
CHT
Charts
Line, Bar, Area, Pie, Sparkline

Overlay​

MDL
Modal
Native dialog overlay — sm to xl
SDB
Sidebar
Sticky nav sidebar with mobile overlay
HDR
Header
Top bar with breadcrumbs and actions
LAY
Layout
Full app shell — sidebar + header + main
SEC
Section
Content section with title and action slot

Dashboards​

DSH
Dashboard
General purpose dashboard shell
DGD
Dashboard Grid
Responsive widget grid layout
STC
Stats Card
Metric display with delta indicator
FLT
Filter Bar
Search, select, and clear filters
EXP
Export Menu
CSV / PDF / Excel export dropdown
ACT
Activity Feed
Chronological activity event list
SEC
Security Dashboard
Threat score and vulnerability panel

Data​

DTB
Data Table
Sortable, filterable, paginated table
SRH
Search
Debounced search with suggestions
LOG
Log Viewer
Structured log display by level

Documents​

DOC
Document Viewer
In-app PDF and image preview
UPL
File Uploader
Drag-and-drop with progress indicator

Notifications​

NTC
Notification Center
In-app notification panel
NTF
Notification Feed
Live chronological event stream

Advanced Forms​

FLD
Form Field
Label + input + hint + error wrapper
TXA
Textarea
Multi-line text input
PAY
Checkout Form
Payment card details form

Workflows​

WIZ
Wizard
Multi-step workflow container
STP
Stepper
Step progress indicator
NAV
Wizard Nav
Back and Next navigation controls
STE
Step
Individual step container
SUM
Summary Card
Review summary before confirm

Banking​

ACC
Account Card
Balance and account number display
BNK
Account Dashboard
Full banking account overview
CCV
Credit Card Visual
Card number, holder, expiry display
CSC
Credit Score Card
Score gauge and rating label
FRD
Fraud Detection
Risk score and alert monitoring
KYC
KYC Verification
Identity verification flow
LON
Loan Calculator
Monthly payment estimator
TXN
Transaction History
Transaction list with status badges

Insurance​

POL
Policy Card
Coverage, premium, status
CLM
Claim Status Tracker
Claim workflow progress steps
TRK
Claim Tracker
Detailed claim management
AGT
Agent Directory
Searchable agent listing
QTE
Quote Comparison
Side-by-side plan comparison
PRM
Premium Calculator
Real-time premium estimate

Authentication​

AIC
AI Copilot
Natural language assistant panel
USR
User Profile
Avatar, name, email, logout

Tools​

FLG
Feature Flag Toggle
Runtime feature flag control
THM
Theme Toggle
Light / dark mode switch
SCN
Security Scan Panel
On-demand vulnerability scanner
RBC
RBAC Admin
Roles, permissions, teams, assignments

Feedback​

TST
Toast
Non-blocking corner notifications
TIP
Tooltip
Hover labels via data-tooltip
SKL
Skeleton
Loading placeholders matching content shape
SPN
Spinner
aria-busy loading indicator
PRG
Progress & Meter
Progress bars and scalar gauges
ACC
Accordion
Collapsible details/summary panels

Interactive​

DDN
Dropdown
Popover action menus
TAB
Tabs
primus-tabs web component
PWD
Password Input
Password field with show/hide toggle
IGP
Input Group
Prefix / suffix / action button on input
LGN
Login
PrimusLogin with SSO and MFA