# Display

Convenience meta-package that re-exports every display component from the toolkit. Install one package instead of many; refer to each component's own page for detailed API and accessibility notes.

## Installation

```bash
npm install @xsolla/xui-display
```

## Imports

```ts
import { Avatar, Badge, Cell, Divider, Tag, Typography } from '@xsolla/xui-display';
```

## Quick start

```tsx
import { Typography, Status, Badge } from '@xsolla/xui-display';

export default function Example() {
  return (
    <>
      <Typography variant="h3" color="primary">Title</Typography>
      <Status palette="success">Online</Status>
      <Badge tone="alert">9</Badge>
    </>
  );
}
```

## Re-exported packages

| Component(s) | Source package |
| :----------- | :------------- |
| Avatar | `@xsolla/xui-avatar` |
| Badge | `@xsolla/xui-badge` |
| Bounding | `@xsolla/xui-bounding` |
| Cell | `@xsolla/xui-cell` |
| Divider | `@xsolla/xui-divider` |
| GameCard | `@xsolla/xui-game-card` |
| IconWrapper | `@xsolla/xui-icon-wrapper` |
| Image | `@xsolla/xui-image` |
| Markdown | `@xsolla/xui-markdown` |
| ProgressBar | `@xsolla/xui-progress-bar` |
| ProgressLine | `@xsolla/xui-progress-line` |
| RichIcon | `@xsolla/xui-rich-icon` |
| Status | `@xsolla/xui-status` |
| Stepper | `@xsolla/xui-stepper` |
| StoreBadge | `@xsolla/xui-store-badge` |
| SupportingText | `@xsolla/xui-supporting-text` |
| SvgThemed | `@xsolla/xui-svg-themed` |
| Tag | `@xsolla/xui-tag` |
| Typography | `@xsolla/xui-typography` |

See each component's dedicated page for props, examples, and accessibility details.