Components
Data

Data Display Components

Components for presenting data, metrics, and content.

Status: Stable

AdvancedTable

Full-featured data table with sorting, filtering, pagination, and row selection.

import { AdvancedTable } from '@gtcx/ui';
 
<AdvancedTable
  dataSource={users}
  columns={[
    { title: 'Name', dataIndex: 'name', sorter: true },
    { title: 'Email', dataIndex: 'email' },
    { title: 'Role', dataIndex: 'role', filters: roleFilters },
  ]}
  rowSelection={{ type: 'checkbox' }}
  pagination={{ pageSize: 20 }}
/>

Card

Content container with variants.

import { Card, CardContent } from '@gtcx/ui';
 
<Card variant="elevated">
  <CardContent>
    <h3>Revenue</h3>
    <p>$124,500</p>
  </CardContent>
</Card>
 
<Card variant="outlined">
  <CardContent>Outlined card</CardContent>
</Card>

Badge

Status indicator labels.

import { Badge } from '@gtcx/ui';
 
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="info">New</Badge>

Avatar

User or entity avatar with fallback.

import { Avatar } from '@gtcx/ui';
 
<Avatar src="/avatars/jane.jpg" alt="Jane Doe" />
<Avatar>JD</Avatar>
<Avatar icon={<UserIcon />} />

Skeleton

Loading placeholder with animated pulse.

import { Skeleton } from '@gtcx/ui';
 
<Skeleton active paragraph={{ rows: 3 }} />
<Skeleton.Avatar active />
<Skeleton.Button active />

DataVisualization

Chart wrapper for metrics display.

import { DataVisualization } from '@gtcx/ui';
 
<DataVisualization
  type="bar"
  data={chartData}
  height={300}
/>

GlassmorphismCard

Frosted glass card with blur backdrop effect.

import { GlassmorphismCard } from '@gtcx/ui';
 
<GlassmorphismCard blur={12} opacity={0.6}>
  <h3>Premium Feature</h3>
</GlassmorphismCard>

AIInsightCard

Card for displaying AI-generated insights with confidence scores.

import { AIInsightCard } from '@gtcx/ui';
 
<AIInsightCard
  title="Revenue Forecast"
  insight="Revenue is projected to grow 15% next quarter"
  confidence={0.87}
  actions={[{ label: 'View Details', onClick: handleClick }]}
/>

Accessibility Notes

  • Provide table headers and column titles for screen readers.
  • Use badges and icons with text labels for status meaning.
  • Ensure charts include text summaries or captions.

Tokens to Customize

  • colorBgContainer
  • colorText
  • borderRadiusLG
NavigationFeedback