Data Display

Tables, badges, avatars, and data presentation components.

Components for displaying data, user information, and status indicators.

Table

Basic table for structured data.

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@kit/ui/table';

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>john@example.com</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
  </TableBody>
</Table>

Data Table

Advanced table with sorting, filtering, and pagination using TanStack Table.

import { DataTable } from '@kit/ui/data-table';

import { ColumnDef } from '@tanstack/react-table';
const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
  {
    accessorKey: 'status',
    header: 'Status',
  },
];
<DataTable
  data={users}
  columns={columns}
  pageIndex={0}
  pageSize={10}
  pageCount={totalPages}
/>

With Pagination Callbacks

<DataTable
  data={users}
  columns={columns}
  pageIndex={page}
  pageSize={10}
  pageCount={totalPages}
  onPaginationChange={(pagination) => {
    setPage(pagination.pageIndex);
  }}
/>

Badge

Small label for status or categories.

import { Badge } from '@kit/ui/badge';

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>

Avatar

User avatar with image and fallback.

import { Avatar, AvatarImage, AvatarFallback } from '@kit/ui/avatar';

<Avatar>
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Profile Avatar

Avatar component with automatic initials fallback.

import { ProfileAvatar } from '@kit/ui/profile-avatar';

{/* With image */}
<ProfileAvatar
  displayName="John Doe"
  pictureUrl="/avatar.jpg"
/>
{/* Initials fallback */}
<ProfileAvatar
  displayName="John Doe"
/>
{/* Single letter */}
<ProfileAvatar text="J" />

Empty State

Placeholder for empty content areas.

import { EmptyState, EmptyStateHeading, EmptyStateText, EmptyStateButton } from '@kit/ui/empty-state';

<EmptyState>
  <EmptyStateHeading>No items found</EmptyStateHeading>
  <EmptyStateText>
    Get started by creating your first item.
  </EmptyStateText>
  <EmptyStateButton>Create Item</EmptyStateButton>
</EmptyState>

With Icon

import { EmptyMedia } from '@kit/ui/empty-state';
import { Inbox } from 'lucide-react';
<EmptyState>
  <EmptyMedia variant="icon">
    <Inbox />
  </EmptyMedia>
  <EmptyStateHeading>No messages</EmptyStateHeading>
  <EmptyStateText>Your inbox is empty.</EmptyStateText>
</EmptyState>

Skeleton

Loading placeholder animation.

import { Skeleton } from '@kit/ui/skeleton';

{/* Text skeleton */}
<Skeleton className="h-4 w-48" />
{/* Avatar skeleton */}
<Skeleton className="h-12 w-12 rounded-full" />
{/* Card skeleton */}
<div className="space-y-2">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>

Chart

Chart components using Recharts.

import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@kit/ui/chart';

import { Bar, BarChart, XAxis, YAxis } from 'recharts';
const chartConfig = {
  value: {
    label: 'Value',
    color: 'hsl(var(--primary))',
  },
};
<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="value" fill="var(--color-value)" />
  </BarChart>
</ChartContainer>

Next: Feedback & Loading →