primereact@11.0.0-alpha.10

UI .p-titleSuite for React

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

Get Started View Components

Support us on GitHub

Last Played

Velvet Haze

Aurora Skies

Dissolve

Phantom Echo

Still Life

Glass Animals

Bloom

Petal Storm

$Refraction$

Refraction

Prism Collective

Ivory

Soft Landing

Ivory

Soft Landing

1:243:45

Storage usage breakdown

Show my disk usage as a meter

Here's a MeterGroup breakdown:

Color-coded segments
Labeled categories

disk usage

Apps 25%
Media 15%
System 20%

1 File

Flat

Rock

Pop

Bass

Jazz

125

250

500

Su	Mo	Tu	We	Th	Fr	Sa
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Su	Mo	Tu	We	Th	Fr	Sa
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	1	2	3	4	5

San Francisco, CA

3 nights · 2 guests

Check-in

Apr 23

Check-out

Apr 26

$429total

Share project

Manage who has access to this project.

Direct link

Anyone with the link can access

Invite to collaborate

Brook Simmons

Dianne Russell

Jacob Jones

Check your email for OTP

Please enter the 6-digit code sent to your email address to reset your password.

Didn't receive code?

Deployment

Choose a region for your deployment.

US East — Virginia

Faster

Low latency, auto-scaling enabled.

EU West — Frankfurt

CI/CD pipeline, daily backups.

SSL and DDoS protection enabled.

Pending

Sending to

Xuxue

Ape Chain

Low gas

Sending to

Amy

Ethereum

$20.00

Sending to

Ioni

Bitcoin

Fee only

Sending to

Asiya

Tether

Instant

Floor Price

Is Verified

Branded Collection Page

Brook Simmons	Important Account UpdateWe've made updates to enhance your account security. Please log in to review.	Security	3:24 PM
Dianne Russell	Weekly Project UpdateAttached is the weekly project update. Kindly review the progress.	Update	11:24 AM
Amy Elsner	Urgent: Security AlertWe detected unauthorized access to your account. Take immediate action.	Security	9:24 AM
Jacob Jones	Exclusive Offer InsideCheck out our exclusive offer! Don't miss this limited-time deal.	Marketing	Jan 21
CW Cameron Watson	Employee Appreciation EventMark your calendars for our upcoming Employee Appreciation Event.	HR	Jan 15
WW Wade Warren	Your Recent PurchaseSecure your spot at the XYZ Conference 2024 with early bird registration.	Invoice	Jan 12
Guy Hawkins	Early Bird Registration OpenWe have scheduled system maintenance. Expect minimal service disruption.	Events	Jan 11

Last Played

Velvet Haze

Aurora Skies

Dissolve

Phantom Echo

Still Life

Glass Animals

Bloom

Petal Storm

$Refraction$

Refraction

Prism Collective

Ivory

Soft Landing

Ivory

Soft Landing

1:243:45

Storage usage breakdown

Show my disk usage as a meter

Here's a MeterGroup breakdown:

Color-coded segments
Labeled categories

disk usage

Apps 25%
Media 15%
System 20%

1 File

Su	Mo	Tu	We	Th	Fr	Sa
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Su	Mo	Tu	We	Th	Fr	Sa
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	1	2	3	4	5

San Francisco, CA

3 nights · 2 guests

Check-in

Apr 23

Check-out

Apr 26

$429total

Flat

Rock

Pop

Bass

Jazz

125

250

500

Share project

Manage who has access to this project.

Direct link

Anyone with the link can access

Invite to collaborate

Brook Simmons

Dianne Russell

Jacob Jones

Check your email for OTP

Please enter the 6-digit code sent to your email address to reset your password.

Didn't receive code?

Deployment

Choose a region for your deployment.

US East — Virginia

Faster

Low latency, auto-scaling enabled.

EU West — Frankfurt

CI/CD pipeline, daily backups.

SSL and DDoS protection enabled.

Pending

Sending to

Xuxue

Ape Chain

Low gas

Sending to

Amy

Ethereum

$20.00

Sending to

Ioni

Bitcoin

Fee only

Sending to

Asiya

Tether

Instant

Floor Price

Is Verified

Branded Collection Page

Brook Simmons	Important Account UpdateWe've made updates to enhance your account security. Please log in to review.	Security	3:24 PM
Dianne Russell	Weekly Project UpdateAttached is the weekly project update. Kindly review the progress.	Update	11:24 AM
Amy Elsner	Urgent: Security AlertWe detected unauthorized access to your account. Take immediate action.	Security	9:24 AM
Jacob Jones	Exclusive Offer InsideCheck out our exclusive offer! Don't miss this limited-time deal.	Marketing	Jan 21
CW Cameron Watson	Employee Appreciation EventMark your calendars for our upcoming Employee Appreciation Event.	HR	Jan 15
WW Wade Warren	Your Recent PurchaseSecure your spot at the XYZ Conference 2024 with early bird registration.	Invoice	Jan 12
Guy Hawkins	Early Bird Registration OpenWe have scheduled system maintenance. Expect minimal service disruption.	Events	Jan 11

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.Thumb />
    </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

Every visual property is a design token. Colors, spacing, radius, typography — customize 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)',
    },
  }
})