Components
Loading preview...
A data table with proximity hover highlighting, animated row backgrounds, smooth transitions, and composable header/body/row/cell components.
@micka_design
npx shadcn@latest add https://21st.dev/r/micka_design/table"use client";
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "../components/ui/table";
const users = [
{ name: "Alice Chen", role: "Product Designer", status: "Active" },
{ name: "Bob Smith", role: "Frontend Engineer", status: "Active" },
{ name: "Carol Williams", role: "Backend Engineer", status: "Away" },
{ name: "Diana Johnson", role: "Data Scientist", status: "Active" },
];
export default function TableUsersDemo() {
return (
<div className="flex items-center justify-center min-h-screen bg-background p-4">
<Table className="w-full max-w-2xl">
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Role</TableHead>
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{users.map((user, i) => (
<TableRow key={user.name} index={i}>
<TableCell className="font-[inherit]">{user.name}</TableCell>
<TableCell>{user.role}</TableCell>
<TableCell>{user.status}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}