---
applyTo: "**/*.tsx,**/*.jsx"
---

# @cfx-dev/ui-components — Data Display Components

## DataTable

Full-featured data table with sorting and row selection:

```tsx
import { DataTable } from '@cfx-dev/ui-components';

const headers = [
  { text: 'Name', sortable: true, sortKey: 'name' },
  { text: 'Status', sortable: true },
  { text: 'Actions' },
];

const rows = [
  ['John Doe', <Badge color="success">Active</Badge>, <IconButton name="Edit" />],
  ['Jane Smith', <Badge color="warning">Pending</Badge>, <IconButton name="Edit" />],
];

<DataTable
  headers={headers}
  rows={rows}
  onSort={handleSort}
  includeRadio
  selectedRow={selectedIdx}
  onSelectChange={setSelectedIdx}
/>
```

## Table

Lower-level table primitives for custom table layouts:

```tsx
import { Table } from '@cfx-dev/ui-components';

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.Cell as="th">Name</Table.Cell>
      <Table.Cell as="th">Value</Table.Cell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Item</Table.Cell>
      <Table.Cell>123</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>
```

## Badge

Status/tag indicator:

```tsx
import { Badge } from '@cfx-dev/ui-components';

<Badge color="success">Active</Badge>
<Badge color="error" size="small">Failed</Badge>
<Badge color="warning" pill>Beta</Badge>
<Badge color="neutral" hoverable icon="Close">Tag</Badge>

// Custom color from theme palette
<Badge color="accent">Custom</Badge>
<Badge color="aurum">Gold</Badge>
```

Colors: `success` (green), `error` (red), `warning` (yellow), `neutral` (grey), or any `ColorType` (`accent`, `primary`, `secondary`, etc.).
Sizes: `small`, `small-medium`, `medium` (default).

## Avatar

User avatar with fallback:

```tsx
import { Avatar } from '@cfx-dev/ui-components';

<Avatar src={user.avatarUrl} alt={user.name} />
<Avatar src={null} />  {/* shows fallback */}
```

## Skeleton

Loading placeholder:

```tsx
import { Skeleton } from '@cfx-dev/ui-components';

<Skeleton width="100%" height="small" borderRadius="xsmall" />
<Skeleton width={20} height={20} borderRadius="pill" />
<Skeleton height={{ initial: 'small', bp768: 'medium' }} />
```

Extends `Box` — accepts all Box props plus `borderRadius` and responsive `height`.

## Carousel

Embla-powered carousel:

```tsx
import { Carousel, CarouselControls } from '@cfx-dev/ui-components';

<Carousel items={items} renderItem={(item) => <Card {...item} />} />
```

## Pagination

Page navigation:

```tsx
import { Pagination } from '@cfx-dev/ui-components';

<Pagination
  currentPage={page}
  totalPages={totalPages}
  onPageChange={setPage}
/>
```

## Indicator

Loading/activity spinner:

```tsx
import { Indicator } from '@cfx-dev/ui-components';

<Indicator />
```

## Dot

Small status dot:

```tsx
import { Dot } from '@cfx-dev/ui-components';

<Dot color="green" size="medium" />
```

## InfoPanel

Informational/alert panel with semantic types:

```tsx
import { InfoPanel } from '@cfx-dev/ui-components';

<InfoPanel type="success" size="medium">Operation completed.</InfoPanel>
<InfoPanel type="error">Something went wrong.</InfoPanel>
<InfoPanel type="warning">Proceed with caution.</InfoPanel>
```

Types: `default`, `success`, `error`, `warning`.

## PremiumBadge

Premium tier indicator:

```tsx
import { PremiumBadge } from '@cfx-dev/ui-components';

<PremiumBadge level="gold" />
```

## OnScreenSensor

Intersection observer wrapper — triggers when element enters viewport:

```tsx
import { OnScreenSensor } from '@cfx-dev/ui-components';

<OnScreenSensor onVisible={() => loadMore()}>
  <div>Loading trigger</div>
</OnScreenSensor>
```

## TableResponsiveText

Text that adapts to available table cell width:

```tsx
import { TableResponsiveText } from '@cfx-dev/ui-components';

<TableResponsiveText>{longCellContent}</TableResponsiveText>
```