# UI Components

Source: https://payloadcms.com/docs/beta/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](./animate-height): Animate a container as its content changes height.
- [Banner](./banner): Display contextual notices, warnings, and errors.
- [Button](./button): Trigger actions with Payload's standard button styles.
- [Card](./card): Present a title with optional actions or full-surface interaction.
- [Collapsible](./collapsible): Show and hide a section beneath a collapsible header.
- [CopyToClipboard](./copy-to-clipboard): Copy text to the clipboard with built-in feedback.
- [DatePicker](./date-picker): Select dates and times with Payload's styled calendar control.
- [ErrorPill](./error-pill): Display a compact, localized validation error count.
- [Gutter](./gutter): Align content with the Admin Panel's responsive gutters.
- [Link](./link): Navigate between Admin routes through Payload's router adapter.
- [List and Pagination Controls](./list-and-pagination-controls): Navigate paginated data and compose common Admin list controls.
- [Motion and Loading](./motion-and-loading): Communicate loading and route transitions with Payload's motion helpers.
- [Pill](./pill): Display compact metadata, categories, and statuses.
- [PillSelector](./pill-selector): Select, deselect, and optionally reorder compact options.
- [ReactSelect](./react-select): Select one or more options with Payload's react-select adapter.
- [ShimmerEffect](./shimmer-effect): Show a loading placeholder while content resolves.

> **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.

## Customizing components

The Design tab in each component example provides CSS you can use as a starting point. Add those overrides to the stylesheet loaded by your Admin Panel.

<CodeTabs>
```css label="Next.js"
/* app/(payload)/custom.css */
@layer payload {
  .btn--style-primary {
    --color-bg-brand: #6d5dfc;
  }
}
```

```css label="TanStack Start"
/* src/routes/_payload/custom.css */

@layer payload {
  .btn--style-primary {
    --color-bg-brand: #6d5dfc;
  }
}
```

</CodeTabs>

Both frameworks use the same Payload selectors and design tokens. Only the stylesheet entry point differs.