GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing primereact.dev — PrimeReact | React UI Component Library

primereact@11.2.3

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

$1.42M

+12.4%

Net flow

$284.6K

+8.2%

Open orders

128

Live

Risk score

24%

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

Accessibility

Accessible by Default

WCAG compliant. Every component handles keyboard, screen readers, and focus out of the box.

Framework

React

Angular

Vue

Svelte

Solid

Tab

Caps

Enter

Shift

↑

Ctrl

Opt

Cmd

Space

Cmd

Opt

←

↓

→

Developer Experience

Built for Developers

Modern tooling, great defaults, and no surprises.

import { DataTable, Column, Dialog, Button, ... } from 'primereact'

130+ Components

From data tables to charts, dialogs to menus. Everything you need.

// severity: "success" | "info" | "warn" | "danger"

TypeScript

Full type safety with auto-complete. Every prop, event, and ref is typed.

bundle.js12kbgzipped

Tree Shakeable

Import only what you use. Dead code elimination keeps your bundle lean.

Next.jsRemixAstroViteTanstack

SSR Ready

Works with any SSR framework. Server components, streaming, the whole deal.

Community

Join the Community

Connect with thousands of developers building with PrimeReact.