primereact@11.0.0-alpha.10

Components

Discover 75+ accessible UI components in Styled and Tailwind versions — built for easy customization and production use.

Form

(25)

AutoComplete

AutoComplete is an input component that provides real-time suggestions when being typed.

styled tailwind

Checkbox

Checkbox is an extension to standard checkbox element with theming.

styled tailwind

CheckboxGroup

CheckboxGroup groups multiple checkboxes and manages their shared value.

styled tailwind

DatePicker

DatePicker is a form component to work with dates.

styled tailwind

FloatLabel

FloatLabel visually integrates a label with its form element.

styled

IconField

IconField wraps an input and an icon.

styled tailwind

IftaLabel

IftaLabel visually integrates a label with its form element.

styled

InputColor

InputColor is a component that allows the user to select a color.

styled tailwind

InputGroup

InputGroup displays text, icon, buttons and other content can be grouped next to an input.

styled tailwind

InputNumber

InputNumber is used to enter numeric values.

styled tailwind

InputOtp

InputOtp is used to enter one time passwords.

styled tailwind

InputPassword

InputPassword is an enhanced input for password entry with strength metering, mask toggling, and controlled or uncontrolled usage.

styled tailwind

InputTags

InputTags groups a collection of contents in items.

styled

InputText

InputText is an extension to standard input element with icons and theming.

styled tailwind

Knob

Knob is a form component to define number inputs with a dial.

styled

Label

Label provides accessible text labels for form controls. Use `htmlFor` to link the label to a form control by its id.

styled tailwind

Listbox

Listbox is used to select one or more values from a list of items.

styled tailwind

RadioButton

RadioButton is an extension to standard radio button element with theming.

styled tailwind

Rating

Rating component is a star based selection input.

styled tailwind

Select

Select is used to choose an item from a collection of options.

styled tailwind

Slider

Slider is a component to provide input with a drag handle.

styled tailwind

Textarea

Textarea is a multi-line text input element.

styled tailwind

ToggleButton

ToggleButton component is used to create a button that can be toggled on or off.

styled tailwind

ToggleButtonGroup

ToggleButtonGroup component is used to create a group of toggle buttons.

styled tailwind

ToggleSwitch

ToggleSwitch is used to select a boolean value.

styled tailwind

Button

(2)

Button

Button is an extension to standard input element with icons and theming.

styled tailwind

SpeedDial

SpeedDial is a floating action button with a popup menu displaying a set of actions.

styled

Data

(8)

DataView

DataView displays data in grid or list layout with pagination and sorting features.

styled tailwind

OrderList

OrderList is used to reorder items in a list using selection and drag-drop.

styled

OrgChart

OrgChart visualizes hierarchical organization data.

styled

Paginator

Paginator displays data in paged format and provides navigation between pages.

styled tailwind

PickList

PickList is used to transfer items between two lists with drag-drop and button controls.

styled

Timeline

Timeline visualizes a series of chained events.

styled tailwind

Tree

Tree is used to display hierarchical data.

styled

TreeTable

TreeTable renders hierarchical data with the same feature set as DataTable — sort, filter, pagination, selection, scroll, frozen, resize, reorder, editing, export.

styled

Panel

(10)

Accordion

Accordion groups content into collapsible panels.

styled tailwind

Card

Card is a flexible container component.

styled tailwind

Divider

Divider is used to separate contents.

styled tailwind

Fieldset

Fieldset is a container component with a legend and optional collapsible content.

styled tailwind

Panel

Panel is a container component with optional collapsible content.

styled tailwind

ScrollArea

ScrollArea is a cross browser, lightweight and themable alternative to native browser scrollbar.

styled tailwind

Splitter

Splitter is utilized to separate and resize panels.

styled tailwind

Stepper

The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression.

styled

Tabs

Tabs is a component that displays a list of tabs and allows the user to select one.

styled tailwind

Toolbar

Toolbar is a grouping component for buttons and other content.

styled tailwind

Overlay

(5)

Dialog

Dialog is a container to display content in an overlay window.

styled tailwind

Drawer

Drawer is a panel component displayed as an overlay at the edges of the screen.

styled tailwind

OverlayManager

OverlayManager opens overlay components imperatively from anywhere in your app.

styled tailwind

Popover

Popover is an overlay container that displays content relative to a trigger.

styled tailwind

Tooltip

Tooltip is a component that displays a tooltip when the user hovers over an element.

styled tailwind

Messages

(2)

Message

Message component is used to display inline messages.

styled tailwind

Toast

Toast is a component that displays a message to the user.

styled tailwind

Media

(3)

Carousel

Carousel is a content slider featuring various customization options.

styled tailwind

Compare

Compare two items side by side with a slider.

styled tailwind

Gallery

Gallery is a component to display a collection of images in a gallery.

styled

File

(1)

FileUpload

FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.

styled

Misc

(15)

AnimateOnScroll

AnimateOnScroll applies enter and leave animations to elements as they move in and out of the viewport during scroll.

styled

Avatar

Avatar represents people using icons, labels and images.

styled tailwind

Badge

Badge is a small status indicator for another element.

styled tailwind

Chip

Chip represents entities using icons, labels and images.

styled tailwind

DataTable

DataTable displays data in tabular format with sorting, filtering, pagination and selection features.

styled

Fluid

Fluid is a layout component to make descendant components span full width of their container.

styled tailwind

FocusTrap

Focus Trap keeps focus within a certain DOM element while tabbing.

styled

Inplace

Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.

styled tailwind

MeterGroup

MeterGroup displays scalar measurements within a known range.

styled tailwind

ProgressBar

ProgressBar is a process status indicator.

styled tailwind

ProgressSpinner

ProgressSpinner is a process status indicator that supports both determinate and indeterminate modes.

styled

Skeleton

Skeleton is a placeholder to display instead of the actual content.

styled tailwind

StyleClass

StyleClass manages CSS classes on a target element with enter/leave animations triggered by user interaction.

styled

Tag

Tag component is used to categorize content.

styled tailwind

Terminal

Terminal is a text-based interface component that emulates a command line experience, enabling users to enter commands and receive responses.

styled

{ "total": 135, "categories": 10, "styled": 77, "tailwind": 58 }

Components

Form

AutoComplete

Checkbox

CheckboxGroup

DatePicker

FloatLabel

IconField

IftaLabel

InputColor

InputGroup

InputNumber

InputOtp

InputPassword

InputTags

InputText

Knob

Label

Listbox

RadioButton

Rating

Select

Slider

Textarea

ToggleButton

ToggleButtonGroup

ToggleSwitch

Button

Button

SpeedDial

Data

DataView

OrderList

OrgChart

Paginator

PickList

Timeline

Tree

TreeTable

Panel

Accordion

Card

Divider

Fieldset

Panel

ScrollArea

Splitter

Stepper

Tabs

Toolbar

Overlay

Dialog

Drawer

OverlayManager

Popover

Tooltip

Menu

Breadcrumb

CommandMenu

ContextMenu

Menu

Menubar

Sidebar

Messages

Message

Toast

Media

Carousel

Compare

Gallery

File

FileUpload

Misc

AnimateOnScroll

Avatar

Badge

Chip

DataTable

Fluid

FocusTrap