tessl/npm-primevue

Comprehensive Vue.js UI component library with 140+ production-ready components, theming, and accessibility features

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Layout Components

Name: tessl/npm-primevue
Author: tessl

Structural components for organizing content including panels, accordions, tabs, splitters, and responsive containers. These components provide the foundation for building well-structured user interfaces with collapsible sections, tabbed content, and flexible layouts.

Capabilities

Container Components

Panel

Collapsible content container with header actions and customizable content areas.

/**
 * Collapsible content container with header and actions
 */
import Panel from "primevue/panel";

interface PanelProps extends BaseComponentProps {
  header?: string;
  toggleable?: boolean;
  collapsed?: boolean;
  toggleButtonProps?: object;
}

Card

Content grouping container with header, body, and footer sections.

/**
 * Content container with header, body, and footer sections
 */
import Card from "primevue/card";

interface CardProps extends BaseComponentProps {
  // Card is primarily template-based with slots for header, title, subtitle, content, footer
}

Fieldset

Form field grouping with legend and collapsible functionality.

/**
 * Form field grouping container with legend
 */
import Fieldset from "primevue/fieldset";

interface FieldsetProps extends BaseComponentProps {
  legend?: string;
  toggleable?: boolean;
  collapsed?: boolean;
  toggleButtonProps?: object;
}

Accordion Components

Accordion

Container for collapsible content panels with single or multiple expansion modes.

/**
 * Container for accordion panels with expansion control
 */
import Accordion from "primevue/accordion";

interface AccordionProps extends BaseComponentProps {
  multiple?: boolean;
  activeIndex?: number | number[];
  lazy?: boolean;
  expandIcon?: string;
  collapseIcon?: string;
  tabindex?: number;
  selectOnFocus?: boolean;
}

AccordionPanel

Individual panel within an accordion container.

/**
 * Individual accordion panel component
 */
import AccordionPanel from "primevue/accordionpanel";

interface AccordionPanelProps extends BaseComponentProps {
  value?: string | number;
  disabled?: boolean;
  readonly?: boolean;
}

AccordionHeader

Header component for accordion panels with customizable content.

/**
 * Header component for accordion panels
 */
import AccordionHeader from "primevue/accordionheader";

interface AccordionHeaderProps extends BaseComponentProps {
  // Primarily template-based for header content
}

AccordionContent

Content area component for accordion panels.

/**
 * Content area for accordion panels
 */
import AccordionContent from "primevue/accordioncontent";

interface AccordionContentProps extends BaseComponentProps {
  // Template-based content container
}

Usage Example:

<template>
  <Accordion :activeIndex="0">
    <AccordionPanel value="0">
      <AccordionHeader>Header I</AccordionHeader>
      <AccordionContent>
        <p>Lorem ipsum dolor sit amet...</p>
      </AccordionContent>
    </AccordionPanel>
    <AccordionPanel value="1">
      <AccordionHeader>Header II</AccordionHeader>
      <AccordionContent>
        <p>Sed ut perspiciatis unde omnis...</p>
      </AccordionContent>
    </AccordionPanel>
  </Accordion>
</template>

Tab Components

Tabs

Modern tabbed interface container with flexible tab positioning.

/**
 * Modern tabbed interface container
 */
import Tabs from "primevue/tabs";

interface TabsProps extends BaseComponentProps {
  value?: string | number;
  lazy?: boolean;
  scrollable?: boolean;
  showNavigators?: boolean;
  tabindex?: number;
  selectOnFocus?: boolean;
}

Tab

Individual tab component within tabs container.

/**
 * Individual tab component
 */
import Tab from "primevue/tab";

interface TabProps extends BaseComponentProps {
  value?: string | number;
  disabled?: boolean;
  readonly?: boolean;
}

TabList

Container for tab headers with navigation controls.

/**
 * Container for tab headers
 */
import TabList from "primevue/tablist";

interface TabListProps extends BaseComponentProps {
  // Container for tab headers
}

TabPanels

Container for tab content panels.

/**
 * Container for tab content panels
 */
import TabPanels from "primevue/tabpanels";

interface TabPanelsProps extends BaseComponentProps {
  // Container for tab content
}

TabPanel

Individual content panel for tabs.

/**
 * Individual tab content panel
 */
import TabPanel from "primevue/tabpanel";

interface TabPanelProps extends BaseComponentProps {
  value?: string | number;
  disabled?: boolean;
  readonly?: boolean;
}

Usage Example:

<template>
  <Tabs value="0">
    <TabList>
      <Tab value="0">Header I</Tab>
      <Tab value="1">Header II</Tab>
      <Tab value="2">Header III</Tab>
    </TabList>
    <TabPanels>
      <TabPanel value="0">
        <p>Lorem ipsum dolor sit amet...</p>
      </TabPanel>
      <TabPanel value="1">
        <p>Sed ut perspiciatis unde omnis...</p>
      </TabPanel>
      <TabPanel value="2">
        <p>At vero eos et accusamus...</p>
      </TabPanel>
    </TabPanels>
  </Tabs>
</template>

Splitter Components

Splitter

Resizable layout panels container with horizontal or vertical orientation.

/**
 * Resizable layout panels container
 */
import Splitter from "primevue/splitter";

interface SplitterProps extends BaseComponentProps {
  layout?: "horizontal" | "vertical";
  gutterSize?: number;
  stateKey?: string;
  stateStorage?: "session" | "local";
}

SplitterPanel

Individual resizable panel within splitter.

/**
 * Individual panel within splitter
 */
import SplitterPanel from "primevue/splitterpanel";

interface SplitterPanelProps extends BaseComponentProps {
  size?: number;
  minSize?: number;
}

Usage Example:

<template>
  <Splitter style="height: 300px" class="mb-5">
    <SplitterPanel class="flex align-items-center justify-content-center">
      Panel 1
    </SplitterPanel>
    <SplitterPanel class="flex align-items-center justify-content-center">
      Panel 2
    </SplitterPanel>
  </Splitter>
</template>

Stepper Components

Stepper

Step-by-step process navigation container with linear and non-linear modes.

/**
 * Step-by-step process navigation container
 */
import Stepper from "primevue/stepper";

interface StepperProps extends BaseComponentProps {
  value?: string | number;
  linear?: boolean;
  orientation?: "horizontal" | "vertical";
}

Step

Individual step component with header and content areas.

/**
 * Individual step in stepper
 */
import Step from "primevue/step";

interface StepProps extends BaseComponentProps {
  value?: string | number;
  disabled?: boolean;
  readonly?: boolean;
}

StepList

Container for step headers in stepper navigation.

/**
 * Container for step headers
 */
import StepList from "primevue/steplist";

interface StepListProps extends BaseComponentProps {
  // Container for step navigation
}

StepPanels

Container for step content panels.

/**
 * Container for step content panels
 */
import StepPanels from "primevue/steppanels";

interface StepPanelsProps extends BaseComponentProps {
  // Container for step content
}

StepPanel

Individual content panel for each step.

/**
 * Individual step content panel
 */
import StepPanel from "primevue/steppanel";

interface StepPanelProps extends BaseComponentProps {
  value?: string | number;
}

Utility Layout Components

Divider

Visual content separator with optional text or icon.

/**
 * Visual content separator
 */
import Divider from "primevue/divider";

interface DividerProps extends BaseComponentProps {
  align?: "left" | "center" | "right" | "top" | "center" | "bottom";
  layout?: "horizontal" | "vertical";
  type?: "solid" | "dashed" | "dotted";
}

ScrollPanel

Custom scrollable area with styled scrollbars.

/**
 * Custom scrollable container
 */
import ScrollPanel from "primevue/scrollpanel";

interface ScrollPanelProps extends BaseComponentProps {
  step?: number;
}

Toolbar

Container for action buttons and tool groupings.

/**
 * Toolbar container for actions and tools
 */
import Toolbar from "primevue/toolbar";

interface ToolbarProps extends BaseComponentProps {
  // Template-based with start, center, end slots
}

Usage Example:

<template>
  <Toolbar class="mb-4">
    <template #start>
      <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" />
      <Button label="Upload" icon="pi pi-upload" severity="info" />
    </template>
    
    <template #center>
      <IconField iconPosition="left">
        <InputIcon>
          <i class="pi pi-search" />
        </InputIcon>
        <InputText placeholder="Search..." />
      </IconField>
    </template>
    
    <template #end>
      <SplitButton label="Save" icon="pi pi-check" :model="items" />
    </template>
  </Toolbar>
</template>

Legacy Components

TabView

Legacy tabbed interface (use Tabs for new projects).

/**
 * Legacy tabbed interface (use Tabs instead)
 */
import TabView from "primevue/tabview";

interface TabViewProps extends BaseComponentProps {
  activeIndex?: number;
  lazy?: boolean;
  scrollable?: boolean;
  tabindex?: number;
  selectOnFocus?: boolean;
  previousIcon?: string;
  nextIcon?: string;
  prevButtonProps?: object;
  nextButtonProps?: object;
}

AccordionTab

Legacy accordion tab component (use AccordionPanel instead).

/**
 * Legacy accordion tab (use AccordionPanel instead)
 */
import AccordionTab from "primevue/accordiontab";

interface AccordionTabProps extends BaseComponentProps {
  header?: string;
  headerStyle?: any;
  headerClass?: string;
  headerProps?: object;
  headerActionProps?: object;
  contentStyle?: any;
  contentClass?: string;
  disabled?: boolean;
}

Types

Layout-specific type definitions:

// Tab change events
interface TabChangeEvent {
  originalEvent: Event;
  index: number;
}

// Accordion events
interface AccordionTabOpenEvent {
  originalEvent: Event;
  index: number;
}

interface AccordionTabCloseEvent {
  originalEvent: Event;
  index: number;
}

// Splitter events
interface SplitterResizeEndEvent {
  originalEvent: Event;
  sizes: number[];
}

Install with Tessl CLI