primeng Documentation

Technical Documentation: primefaces/primeng

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`) Copy Section

PrimeNG

[!WARNING]
This repository is no longer under active development and receives security fixes only. PrimeNG continues as part of PrimeUI.
Issues here are read-only. Bug reports and feature requests belong at PrimeUI; for security vulnerabilities, see SECURITY.md.

The next chapter has begun. Copy Section

After years as an open source library, PrimeNG enters its next chapter as part of PrimeUI, a sustainable foundation for the libraries you rely on.

What this means Copy Chapter

Existing MIT versions remain MIT, forever.
Every release published under the MIT license stays exactly as it is. Your existing projects are unaffected. Nothing is taken away.

Security updates continue here.
We keep publishing security fixes for the MIT-licensed releases. How to report one is in SECURITY.md.

Development continues at a new home.
Active development, new releases, and everything ahead now live under PrimeUI.

➡️ Read the announcement: primeui.dev/nextchapter

➡️ The journey continues at: primeng.dev

Thank you Copy Chapter

To everyone who used PrimeNG, filed an issue, opened a pull request, answered a question, or simply built something with it, thank you. This library reached hundreds of millions of downloads because of you.

The next chapter is just beginning, and we hope you'll be part of it.

The PrimeTek Team

Overview (`apps/showcase/README.md`) Copy Section

Website Copy Section

PrimeNG is a rich set of open source UI Components for Angular. Visit the PrimeNG website for interactive demos, comprehensive documentation and additional resources.

Overview (`packages/mcp/README.md`) Copy Section

@primeng/mcp

Model Context Protocol (MCP) server for PrimeNG component library. Provides AI assistants with comprehensive access to PrimeNG component documentation, props, events, templates, theming, and code examples.

What is MCP? Copy Chapter

Model Context Protocol (MCP) is an open standard that enables AI models to connect with external tools and data sources. By installing this MCP server, your AI assistant gains deep knowledge of PrimeNG components and can provide accurate, up-to-date information while helping you build Angular applications.

Installation Copy Chapter

Claude Code Copy Section

Add the PrimeNG MCP server using the CLI:

# Add to your user config (available in all projects)
claude mcp add primeng -s user -- npx -y @primeng/mcp

# Or add to current project only
claude mcp add primeng -- npx -y @primeng/mcp

Alternatively, use the JSON format for more control:

claude mcp add-json primeng '{"command":"npx","args":["-y","@primeng/mcp"]}' -s user

Useful commands:

claude mcp list           # List all MCP servers
claude mcp get primeng    # Get server details
claude mcp remove primeng # Remove the server

After adding, start a new Claude Code session and use /mcp to verify the connection.

Reference: Claude Code MCP Documentation

VS Code Copy Section

Option 1: Project Configuration

Create .vscode/mcp.json in your project:

{
    "servers": {
        "primeng": {
            "command": "npx",
            "args": ["-y", "@primeng/mcp"]
        }
    }
}

Option 2: Global Configuration

Create or edit ~/Library/Application Support/Code/User/mcp.json (macOS) or ~/.config/Code/User/mcp.json (Linux):

{
    "servers": {
        "primeng": {
            "command": "npx",
            "args": ["-y", "@primeng/mcp"]
        }
    }
}

After adding, the MCP server will be available in GitHub Copilot Chat.

Reference: VS Code MCP Documentation

Cursor Copy Section

Option 1: Project Configuration

Create .cursor/mcp.json in your project:

{
    "mcpServers": {
        "primeng": {
            "command": "npx",
            "args": ["-y", "@primeng/mcp"]
        }
    }
}

Option 2: Global Configuration

Create or edit ~/.cursor/mcp.json in your home directory:

{
    "mcpServers": {
        "primeng": {
            "command": "npx",
            "args": ["-y", "@primeng/mcp"]
        }
    }
}

Option 3: Via Settings UI

1. Go to Cursor Settings > Tools & Integrations
2. Click New MCP Server
3. Add the configuration above

After adding, go to Settings > MCP and click the refresh button. The Composer Agent will automatically use PrimeNG tools when relevant.

Reference: Cursor MCP Documentation

OpenAI Codex CLI Copy Section

Option 1: Using the CLI

codex mcp add primeng -- npx -y @primeng/mcp

Option 2: Direct Configuration

Edit ~/.codex/config.toml:

[mcp_servers.primeng]
command = "npx"
args = ["-y", "@primeng/mcp"]

After adding, the MCP server will be available in both the Codex CLI and VS Code extension.

Reference: OpenAI Codex MCP Documentation

Windsurf Copy Section

Option 1: Via Settings UI

1. Click Windsurf - Settings (bottom right) or press Cmd+Shift+P / Ctrl+Shift+P
2. Type "Open Windsurf Settings"
3. Navigate to Cascade section
4. Click Manage MCPs > View raw config

Option 2: Direct Configuration

Edit ~/.codeium/windsurf/mcp_config.json:

{
    "mcpServers": {
        "primeng": {
            "command": "npx",
            "args": ["-y", "@primeng/mcp"]
        }
    }
}

After adding, the MCP server will be available in Cascade.

Reference: Windsurf MCP Documentation

Zed Copy Section

Add to your Zed settings (~/.config/zed/settings.json on Linux, ~/Library/Application Support/Zed/settings.json on macOS):

{
    "context_servers": {
        "primeng": {
            "command": {
                "path": "npx",
                "args": ["-y", "@primeng/mcp"]
            }
        }
    }
}

After adding, restart Zed. Check the Agent Panel's settings view - a green indicator dot next to "primeng" confirms the server is active.

Reference: Zed MCP Documentation

Available Tools Copy Chapter

Component Information Copy Section

Code Examples Copy Section

Theming & Styling Copy Section

Documentation & Guides Copy Section

Migration Copy Section

Search & Discovery Copy Section

Utilities Copy Section

Example Prompts Copy Chapter

Once installed, try asking your AI assistant:

• "Show me how to use the DataTable component with sorting and filtering"
• "What props does the Button component have?"
• "How do I customize the Dialog component styling with Pass Through?"
• "Compare the Select and Listbox components"
• "What's the best component for a date picker?"
• "How do I migrate from PrimeNG v20 to v21?"

Requirements Copy Chapter

• Node.js 18+
• One of the supported AI tools (Claude Code, Cursor, OpenAI Codex, Windsurf, Zed)

Links Copy Chapter

• PrimeNG Documentation
• Model Context Protocol
• GitHub Repository
• Report Issues

License Copy Chapter

MIT

Overview (`packages/primeng/README.md`) Copy Section

PrimeNG Website

PrimeNG is a rich set of open source UI Components for Angular. Visit the PrimeNG website for interactive demos, comprehensive documentation and additional resources.

Apps Showcase Doc Apidoc Index.Json (`apps/showcase/doc/apidoc/index.json`) Copy Section

{
"accordion": {
"components": {
"AccordionPanel": {
"description": "AccordionPanel is a helper component for Accordion component.",
"props": {
"description": "Defines the input properties of the component.",
"values": [
{
"name": "value",
"optional": false,
"readonly": false,
"type": "ModelSignal<string | number | string[] | number[]>",
"default": "undefined",
"description": "Value of the active tab."
},
{
"name": "disabled",
"optional": false,
"readonly": false,
"type": "InputSignalWithTransform<any, boolean>",
"default": "false",
"description": "Disables the tab when enabled."
},
{
"name": "dt",
"optional": false,
"readonly": false,
"type": "InputSignal