DOCSEARCHbyAlgolia
Submit Docs

PrimeReact

website·Indexed 32 days ago

https://primereact.dev/

A collection of unstyled primitive React components and a standalone library of React hooks (@primereact/hooks) that handle logic and accessibility, allowing developers to bring their own markup and styles.

Tokens
686.2K
Snippets
2.6K
Records
3.2K
Agent score
70%

What's inside PrimeReact

  1. Overview of @primereact/hooks library

    @primereact/hooks is a standalone library of React hooks designed to solve concrete problems (such as filtering lists, formatting numbers, or monitoring media queries) without rendering DOM elements or depending on PrimeReact components. It can be used in any React project (CRA, Vite, Next.js, Remix, React Native Web) and is fully typed with TypeScript. The library is SSR-safe, with DOM-touching hooks internally marked as 'use client'.

  3. Overview of PrimeReact Headless Sidebar hooks

    PrimeReact provides a family of headless hooks to manage sidebar functionality without imposing a specific UI structure. The responsibilities are split across three hooks:

    • useSidebar: Manages the open/collapse state and properties for a single sidebar.
    • useSidebarLayout: Coordinates multiple sidebars, manages a shared backdrop, and provides imperative controls for cross-sidebar toggles.
    • useSidebarMenuItem: Manages the expandable/collapsible state of individual menu items within a sidebar.

  4. Overview of the useDatePicker hook

    The useDatePicker hook is used to manage the internal state and logic of a date picker component. It handles calendar navigation, switching between different views (e.g., month/year), and the positioning of the picker popup.

  5. Overview of PrimeOne Figma UI Kit

    PrimeOne is the official Figma UI Kit provided by PrimeTek. It is specifically designed to align with the technical implementations found across the Prime UI Suites, ensuring consistency between design mockups and developed components.

  6. Overview of the PrimeReact MCP Server

    The @primereact/mcp package implements the Model Context Protocol (MCP), enabling AI assistants to search and read PrimeReact documentation, guides, examples, and API metadata. It is a read-only server that requires Node.js 22 or newer and does not modify project files or configurations.

  7. Overview of PrimeReact Theme Designer

    Theme Designer is a visual tool built on top of the open-source theming API to simplify theme customization. It includes four primary features: a visual editor for token modification, a Figma-to-theme code generator, cloud storage for theme accessibility, and a migration assistant to update themes to the latest library versions.

  8. Overview of PrimeReact Premium Add-Ons

    PrimeReact offers a suite of premium, production-ready resources designed to accelerate development by reducing boilerplate. These add-ons include:

    • Templates: Complete, themeable application starters featuring pre-configured layouts, pages, and integrations.
    • Blocks: Ready-made UI sections for marketing, e-commerce, and application pages that can be copied and pasted into a project.
    • Figma UI Kit: A design source that mirrors the PrimeReact component library, allowing for design-first development.
    • Theme Designer: A visual tool used to create, customize, and export design tokens and custom themes.

  9. Introduction to PrimeReact Styled components

    PrimeReact 'Styled' is a collection of 70+ production-ready React components that come with a built-in design system and a token-based theme. They are built on top of a headless layer, providing a consistent, polished look out of the box without requiring custom CSS. Key features include built-in dark mode, accessibility, and a composable API. While pre-styled, appearance can still be customized using design tokens or pass-through props.

  10. Overview of PrimeOne Figma UI Kit features

    PrimeOne is the official Figma UI Kit designed to align with Prime UI Suites. It implements modern Figma best practices and enterprise-grade design systems, including:

    • Figma Advanced Features: Utilizes components, variants, auto layout, styles, variables, interactive components, nested instances, and boolean/instance swap/text properties.
    • System Capabilities: Provides a comprehensive library of components and icons using an atomic design approach for easy customization.
    • Theme Support: Built-in support for Aura Light and Aura Dark themes, manageable via Figma's native variable modes.
    • Variable Management: Uses native Figma Variables for design tokens (Primitive, Semantic, and Component levels) to eliminate reliance on external plugins.

  11. Overview of PrimeReact Theme Designer

    The Theme Designer is a comprehensive tool for customizing PrimeReact themes. It provides a visual interface to design and preview changes in real-time, supporting both light and dark modes, custom tokens, and starter kits.

  12. Overview of FileUpload compound components

    The FileUpload component uses a compound API to provide complete control over the layout and behavior of file uploaders. It supports drag-and-drop, file type/size validation, and XMLHttpRequest-based upload progress tracking. It maintains separate tracking for pending and uploaded files.
    import { FileUpload } from 'primereact/fileupload';

<FileUpload.Root>
    <FileUpload.Trigger>Choose</FileUpload.Trigger>
    <FileUpload.Upload>Upload</FileUpload.Upload>
    <FileUpload.Clear>Clear</FileUpload.Clear>
    <FileUpload.Content>
        <FileUpload.ItemGroup>
            <FileUpload.Item file={file} index={index}>
                <FileUpload.ItemPreview />
                <FileUpload.ItemInfo>
                    <FileUpload.ItemName />
                    <FileUpload.ItemSize />
                </FileUpload.ItemInfo>
                <FileUpload.ItemRemove />
            </FileUpload.Item>
        </FileUpload.ItemGroup>
    </FileUpload.Content>
</FileUpload.Root>