# UI Components

Source: https://payloadcms.com/docs/ui-components/overview

The `@payloadcms/ui` package contains the React components used throughout the Payload Admin Panel. You can use these components to build Custom Components that match the surrounding Admin Panel interface and behavior.

Each component guide includes working examples for the selected version of Payload, common props, accessibility guidance, and any providers or setup the component requires.

## Components

- [AnimateHeight](/docs/v3/ui-components/animate-height.md): Animate a container as its content changes height.
- [Banner](/docs/v3/ui-components/banner.md): Display contextual notices, warnings, and errors.
- [Button](/docs/v3/ui-components/button.md): Trigger actions with Payload's standard button styles.
- [Card](/docs/v3/ui-components/card.md): Present content in a clickable or navigable card.
- [CodeEditor](/docs/v3/ui-components/code-editor.md): Display and edit code with Payload's Monaco-based editor.
- [Collapsible](/docs/v3/ui-components/collapsible.md): Show and hide a section beneath a collapsible header.
- [CopyToClipboard](/docs/v3/ui-components/copy-to-clipboard.md): Copy text to the clipboard with built-in feedback.
- [DatePicker](/docs/v3/ui-components/date-picker.md): Select calendar dates and times.
- [Dropzone](/docs/v3/ui-components/dropzone.md): Accept files through drag, drop, and paste interactions.
- [ErrorPill](/docs/v3/ui-components/error-pill.md): Show a compact validation or error indicator.
- [Gutter](/docs/v3/ui-components/gutter.md): Align content with the Admin Panel's responsive gutters.
- [Hamburger](/docs/v3/ui-components/hamburger.md): Render Payload's animated menu toggle.
- [Link](/docs/v3/ui-components/link.md): Navigate with Payload's router-aware link.
- [List and Pagination Controls](/docs/v3/ui-components/list-and-pagination-controls.md): Add pagination, sorting, and selection to Admin lists.
- [Modals and Drawers](/docs/v3/ui-components/modals-and-drawers.md): Present focused actions and supporting content in overlays.
- [Motion and Loading](/docs/v3/ui-components/motion-and-loading.md): Communicate loading and animate layout changes.
- [Navigation Controls](/docs/v3/ui-components/navigation-controls.md): Compose Admin menu and step navigation controls.
- [Pill](/docs/v3/ui-components/pill.md): Display compact metadata, statuses, and actions.
- [PillSelector](/docs/v3/ui-components/pill-selector.md): Choose from a compact group of pill-shaped options.
- [Popup and PopupList](/docs/v3/ui-components/popup.md): Build contextual menus and lists of actions.
- [ReactSelect and Select](/docs/v3/ui-components/react-select.md): Add select inputs styled for the Payload Admin Panel.
- [SearchBar](/docs/v3/ui-components/search-filter.md): Filter content with a complete, debounced search control.
- [ShimmerEffect](/docs/v3/ui-components/shimmer-effect.md): Show a loading placeholder while content resolves.
- [Table](/docs/v3/ui-components/table.md): Display rows with Payload's responsive table styles.
- [Thumbnail](/docs/v3/ui-components/thumbnail.md): Render media thumbnails with file-type fallbacks.
- [TimezonePicker](/docs/v3/ui-components/timezone-picker.md): Select from a configured list of timezones.
- [Tooltip](/docs/v3/ui-components/tooltip.md): Provide contextual labels on hover or focus.
- [Upload](/docs/v3/ui-components/upload.md): Extend upload-enabled Collection file workflows.

> **Warning**
>
> UI component APIs can change between major versions of Payload. Use the
> version selector to view examples that match the version installed in your
> project.

## Using UI components

Inside a Payload Admin Panel Custom Component, import components from `@payloadcms/ui`:

```tsx
'use client'

import { Button } from '@payloadcms/ui'

export function SaveButton() {
  return <Button>Save changes</Button>
}
```

Some components depend on context provided by the Admin Panel. Each guide calls out those requirements when a component cannot be rendered independently.