@xsolla/xui-display
v0.159.0
Published
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.
Readme
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
npm install @xsolla/xui-displayImports
import { Avatar, Badge, Cell, Divider, Tag, Typography } from '@xsolla/xui-display';Quick start
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.
