CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-payloadcms--ui

UI components library for Payload CMS providing React components, hooks, forms, and styling for building admin interfaces and extensible UI elements.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

icons.mddocs/

Icon Components

Complete icon set for common admin interface needs including navigation, actions, content types, and status indicators. All icons are React SVG components with consistent styling and customization options.

Common Icon Props

All icon components share the same base interface:

interface IconProps {
  className?: string;
  size?: number | string;
  style?: React.CSSProperties;
  color?: string;
}

Navigation Icons

ChevronIcon

Directional arrow icon for navigation and expansion.

function ChevronIcon(props: IconProps): JSX.Element;

Usage example:

import { ChevronIcon } from '@payloadcms/ui';

function DropdownButton() {
  return (
    <button>
      Menu <ChevronIcon size={16} />
    </button>
  );
}

MenuIcon

Hamburger menu icon for mobile navigation.

function MenuIcon(props: IconProps): JSX.Element;

CloseMenuIcon

Close/X icon for dismissing menus and modals.

function CloseMenuIcon(props: IconProps): JSX.Element;

MoreIcon

Three dots icon for additional actions menu.

function MoreIcon(props: IconProps): JSX.Element;

XIcon

Generic close/cancel icon.

function XIcon(props: IconProps): JSX.Element;

Action Icons

EditIcon

Edit/modify action icon.

function EditIcon(props: IconProps): JSX.Element;

PlusIcon

Add/create action icon.

function PlusIcon(props: IconProps): JSX.Element;

CheckIcon

Confirm/success action icon.

function CheckIcon(props: IconProps): JSX.Element;

SwapIcon

Exchange/swap action icon.

function SwapIcon(props: IconProps): JSX.Element;

CopyIcon

Copy/duplicate action icon.

function CopyIcon(props: IconProps): JSX.Element;

SearchIcon

Search functionality icon.

function SearchIcon(props: IconProps): JSX.Element;

DragHandleIcon

Drag handle for sortable items.

function DragHandleIcon(props: IconProps): JSX.Element;

Content Icons

DocumentIcon

Document/file representation icon.

function DocumentIcon(props: IconProps): JSX.Element;

FolderIcon

Folder/directory icon.

function FolderIcon(props: IconProps): JSX.Element;

MoveFolderIcon

Move folder action icon.

function MoveFolderIcon(props: IconProps): JSX.Element;

CalendarIcon

Date/calendar icon.

function CalendarIcon(props: IconProps): JSX.Element;

LinkIcon

Link/URL icon.

function LinkIcon(props: IconProps): JSX.Element;

ExternalLinkIcon

External link icon (with arrow indicator).

function ExternalLinkIcon(props: IconProps): JSX.Element;

CodeBlockIcon

Code block representation icon.

function CodeBlockIcon(props: IconProps): JSX.Element;

LineIcon

Horizontal line/separator icon.

function LineIcon(props: IconProps): JSX.Element;

View Icons

GridViewIcon

Grid layout view icon.

function GridViewIcon(props: IconProps): JSX.Element;

ListViewIcon

List layout view icon.

function ListViewIcon(props: IconProps): JSX.Element;

MinimizeMaximizeIcon

Expand/collapse view icon.

function MinimizeMaximizeIcon(props: IconProps): JSX.Element;

Status Icons

LogOutIcon

Logout/sign out action icon.

function LogOutIcon(props: IconProps): JSX.Element;

ErrorIcon

Error state indicator icon.

function ErrorIcon(props: IconProps): JSX.Element;

InfoIcon

Information state icon.

function InfoIcon(props: IconProps): JSX.Element;

SuccessIcon

Success state indicator icon.

function SuccessIcon(props: IconProps): JSX.Element;

WarningIcon

Warning state indicator icon.

function WarningIcon(props: IconProps): JSX.Element;

Icon Usage Patterns

With Buttons

import { Button, PlusIcon, EditIcon } from '@payloadcms/ui';

function ActionButtons() {
  return (
    <div>
      <Button icon={<PlusIcon />} appearance="primary">
        Add Item
      </Button>
      <Button icon={<EditIcon />} appearance="secondary">
        Edit
      </Button>
    </div>
  );
}

In Lists and Tables

import { Table, EditIcon, DocumentIcon } from '@payloadcms/ui';

function DocumentTable({ data }) {
  const columns = [
    {
      accessor: 'title',
      label: 'Document',
      components: {
        renderCell: ({ rowData }) => (
          <div>
            <DocumentIcon size={16} />
            {rowData.title}
          </div>
        )
      }
    },
    {
      accessor: 'actions',
      label: 'Actions',
      components: {
        renderCell: ({ rowData }) => (
          <button onClick={() => edit(rowData.id)}>
            <EditIcon size={16} />
          </button>
        )
      }
    }
  ];

  return <Table columns={columns} data={data} />;
}

Status Indicators

import { ErrorIcon, SuccessIcon, WarningIcon } from '@payloadcms/ui';

function StatusIndicator({ status, message }) {
  const getIcon = () => {
    switch (status) {
      case 'error':
        return <ErrorIcon color="red" />;
      case 'success':
        return <SuccessIcon color="green" />;
      case 'warning':
        return <WarningIcon color="orange" />;
      default:
        return null;
    }
  };

  return (
    <div className="status-indicator">
      {getIcon()}
      <span>{message}</span>
    </div>
  );
}

Navigation Menus

import { 
  MenuIcon, 
  CloseMenuIcon, 
  ChevronIcon,
  DocumentIcon,
  FolderIcon 
} from '@payloadcms/ui';

function NavigationMenu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? <CloseMenuIcon /> : <MenuIcon />}
      </button>
      
      {isOpen && (
        <ul>
          <li>
            <DocumentIcon size={16} />
            <span>Documents</span>
            <ChevronIcon size={12} />
          </li>
          <li>
            <FolderIcon size={16} />
            <span>Media</span>
            <ChevronIcon size={12} />
          </li>
        </ul>
      )}
    </nav>
  );
}

Icon Styling

import { SearchIcon } from '@payloadcms/ui';

function CustomStyledIcon() {
  return (
    <SearchIcon 
      size={24}
      color="#007acc"
      style={{ 
        marginRight: '8px',
        opacity: 0.8 
      }}
      className="custom-search-icon"
    />
  );
}

Icon in Form Fields

import { TextField, CalendarIcon, LinkIcon } from '@payloadcms/ui';

function FormWithIcons() {
  return (
    <form>
      <div className="field-with-icon">
        <CalendarIcon size={16} />
        <TextField path="publishDate" label="Publish Date" />
      </div>
      
      <div className="field-with-icon">
        <LinkIcon size={16} />
        <TextField path="externalUrl" label="External URL" />
      </div>
    </form>
  );
}

Icon Accessibility

All icons support accessibility features:

import { EditIcon } from '@payloadcms/ui';

function AccessibleIconButton() {
  return (
    <button aria-label="Edit document">
      <EditIcon />
      <span className="sr-only">Edit</span>
    </button>
  );
}

Icon Customization

Icons can be styled with CSS classes:

.custom-icon {
  transition: all 0.2s ease;
}

.custom-icon:hover {
  transform: scale(1.1);
  color: var(--theme-primary);
}
import { PlusIcon } from '@payloadcms/ui';

function AnimatedIcon() {
  return (
    <PlusIcon 
      className="custom-icon"
      size={20}
    />
  );
}

Icon Library Organization

The @payloadcms/ui package organizes icons by functional category:

  • Navigation: ChevronIcon, MenuIcon, CloseMenuIcon, MoreIcon, XIcon
  • Actions: EditIcon, PlusIcon, CheckIcon, SwapIcon, CopyIcon, SearchIcon, DragHandleIcon
  • Content: DocumentIcon, FolderIcon, MoveFolderIcon, CalendarIcon, LinkIcon, ExternalLinkIcon, CodeBlockIcon, LineIcon
  • Views: GridViewIcon, ListViewIcon, MinimizeMaximizeIcon
  • Status: LogOutIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon

All icons are designed to be consistent in style, scalable, and optimized for clarity at different sizes.

Install with Tessl CLI

npx tessl i tessl/npm-payloadcms--ui

docs

components.md

fields.md

forms.md

hooks.md

icons.md

index.md

providers.md

utilities.md

tile.json