repository·master·Indexed 12 days ago
https://github.com/primefaces/primevueA comprehensive Vue UI component library featuring a wide range of components, composables, and a dedicated Nuxt module. Version 4.5.5 includes support for Styled and Unstyled modes, a Pass Through (PT) mechanism for DOM customization, design tokens, and an MCP server (@primevue/mcp) for AI assistants like Claude Code, Cursor, and VS Code.
Unstyled mode is an alternative styling approach where PrimeVue excludes the default CSS variables (design tokens) and CSS rule sets. In this mode, the core functionality and accessibility of components are preserved, but no visual styling is provided. This allows developers to implement their own styling solutions (like Tailwind CSS) from scratch.
Components in unstyled mode can be styled using the Pass Through (pt) mechanism to target specific internal elements like root, label, or icon.
The PrimeVue Model Context Protocol (MCP) server is an implementation of an open standard that allows AI assistants (like Claude, Cursor, or VS Code) to connect directly to PrimeVue's knowledge base.
By using this server, your AI assistant gains access to:
Volt is a UI library built by PrimeTek that uses unstyled PrimeVue components combined with Tailwind CSS v4.
Unlike standard PrimeVue components distributed via node_modules, Volt follows a code ownership model where components reside within your application's codebase. This provides complete control over theming and presentation through Tailwind CSS v4 and PrimeVue's templating features.
The Select component is designed with accessibility in mind, utilizing roles like combobox and listbox.
aria-labelledby: Links the component to a label element.aria-label: Provides a direct string description for screen readers.filterInputProps: Allows passing aria-* props to the internal filter input element when filtering is enabled.| State | Key | Action |
|---|---|---|
| Closed | space, enter, down arrow | Opens the popup and focuses the selected (or first) option |
any printable character | Opens popup and moves focus to option starting with that character | |
| Popup | enter, space | Selects focused option, closes popup, returns focus to Select |
escape | Closes popup, returns focus to Select | |
down arrow / up arrow | Navigates through options | |
home / end | Moves cursor to start/end (if editable) or first/last option | |
| Filter Input | enter, escape | Closes popup and returns focus to Select |
tab | Moves focus to the next focusable element in the popup or the page |
PrimeVue includes add-ons like UI Kit, Premium Templates, and Blocks that depend on design tokens and styling.
Important: Any core structural changes—such as adding new props, adding new events, or updating design tokens—must be communicated with the core team to ensure consistency and compatibility across the ecosystem.
The Slider component is designed for accessibility. It uses the slider role on the handle and includes attributes like aria-orientation, aria-valuemin, aria-valuemax, and aria-valuenow.
Labeling:
Use aria-labelledby to link to an existing label ID, or aria-label to provide a direct string label.
Keyboard Support:
Tab: Moves focus to the slider.Left Arrow / Up Arrow: Decrements the value.Right Arrow / Down Arrow: Increments the value.Home: Sets the value to the minimum.End: Sets the value to the maximum.Page Up: Increments the value by 10 steps.Page Down: Decrements the value by 10 steps.<span id="label_number">Number</span>
<Slider aria-labelledby="label_number" />
<Slider aria-label="Number" />The TreeTable uses a treegrid element for screen readers. You can extend its accessibility by passing aria-label, aria-describedby, or other roles via the tableProps option.
| Key | Function |
|---|---|
tab | Moves through headers. If focus enters the component, moves to the first selected node (or first element if none selected). |
shift + tab | Moves focus to the last selected node or previous element. |
enter / space | Sorts the column or selects the focused treenode. |
down arrow | Moves focus to the next treenode. |
up arrow | Moves focus to the previous treenode. |
right arrow | If node is closed, opens it; otherwise moves focus to the first child node. |
left arrow | If node is open, closes it; otherwise moves focus to the parent node. |
home | Moves focus to the first same-level node. |
end | Moves focus to the last same-level node. |
The ScrollPanel component includes built-in accessibility features:
scrollbar role, an aria-controls attribute (referring to the ID of the scrollable content container), and aria-orientation to indicate scrolling direction.Tab: Moves focus through the bar.Down Arrow: Scrolls content down (when vertical scrolling is available).Up Arrow: Scrolls content up (when vertical scrolling is available).Left Arrow: Scrolls content left (when horizontal scrolling is available).Right Arrow: Scrolls content right (when horizontal scrolling is available).Note: Change in v3.41.0
The DataView component no longer requires primeflex as a dependency. If your layout relied on DataView implicitly providing PrimeFlex classes, you may need to manage those styles manually.
The IftaLabel component is used to create infield, top-aligned labels. This is typically used in conjunction with the variant="filled" prop on the InputText component.
<IftaLabel>
<InputText id="username" v-model="value" variant="filled" />
<label for="username">Username</label>
</IftaLabel>The AnimateOnScroll directive is designed with accessibility in mind: