TkxList

import { TkxList } from 'tekivex-ui';

Basic

Basic — bordered list

README.md

Last edited 2 hours ago

CHANGELOG.md

Last edited yesterday

package.json

Last edited 3 days ago

<TkxList
  bordered
  items={[
    { key: '1', title: 'README.md', description: 'Last edited 2 hours ago' },
    { key: '2', title: 'CHANGELOG.md', description: 'Last edited yesterday' },
  ]}
/>

With avatars + actions

With avatars + action buttons

Priya Kumar

priya@example.com

Marcus Lee

marcus@example.com

Sara Chen

sara@example.com

With extra metadata (badges)

With extra / badge metadata

Production

us-east-1

healthy

Staging

us-east-1

degraded

Dev

eu-west-1

down

Loading state

Props

Prop	Type	Required
`items`	`ListItem[]`	yes
`header`	`ReactNode`
`footer`	`ReactNode`
`bordered`	`boolean`
`size`	`'sm' \| 'md' \| 'lg'`
`loading`	`boolean`
`emptyText`	`string`
`grid`	`{ column?: number; gutter?: number }`

Accessibility

Keyboard navigation supported on all interactive elements
:focus-visible outline at 2px (theme-token primary)
ARIA roles and properties applied per WAI-ARIA 1.2
Respects prefers-reduced-motion
Minimum 44×44 touch target where applicable

Source

The implementation lives at src/components/TkxList.tsx.

For the full interactive sandbox, open the playground.