primereact@11.0.0-rc.1

Premium UI .p-titleSuite for React

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

Get Started View Components

OverviewLive

Portfolio command

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

Total balance

+12.4%

Net flow

+8.2%

Open orders

Live

Risk score

Low

Portfolio activity

Personal Wallet

Corporate Wallet

Investment Wallet

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

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 primereact

import { Slider } from 'primereact'

export function VolumeControl() {
  return (
    <Slider.Root defaultValue={50}>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Handle />
    </Slider.Root>
  )
}

Architecture

Built in Layers

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

// Headless — logic only, you control the markup
import { useDialog } from '@primereact/headless/dialog'

const { popupProps, overlayProps, closeProps } = useDialog({
  open: isOpen,
  onOpenChange: setIsOpen,
})

<div {...overlayProps} className="fixed inset-0 bg-black/50" />
<div {...popupProps} className="fixed inset-0 flex items-center">
  <div className="bg-white rounded-xl p-6">
    {children}
    <button {...closeProps}>Close</button>
  </div>
</div>

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)',
    },
  }
})