MyloUI
Back to blocks
table
Block

Cards Table

Card-based layout with contact profiles

Installation

npx shadcn add @mylo-ui/table-cards

Preview

JS

John Smith

CEO

TechCorp

[EMAIL_REDACTED]
[PHONE NUMBER_REDACTED]
San Francisco, CA
SJ

Sarah Johnson

CTO

Innovate Inc

[EMAIL_REDACTED]
[PHONE NUMBER_REDACTED]
New York, NY
MB

Michael Brown

VP Sales

SalesForce Pro

[EMAIL_REDACTED]
[PHONE NUMBER_REDACTED]
Chicago, IL
ED

Emily Davis

Product Manager

ProductHub

[EMAIL_REDACTED]
[PHONE NUMBER_REDACTED]
Austin, TX
DW

David Wilson

Engineering Lead

DevStudio

[EMAIL_REDACTED]
[PHONE NUMBER_REDACTED]
Seattle, WA
LA

Lisa Anderson

Designer

Creative Labs

[EMAIL_REDACTED]
[PHONE NUMBER_REDACTED]
Los Angeles, CA

Usage

import { TableCards } from "@/components/blocks/table-cards"

export default function Page() {
  return <TableCards />
}

Dependencies

lucide-react

shadcn/ui Components

card
button

Related Blocks

More table blocks you might like

View all table blocks
Simple Table
table

Simple Table

Clean, minimal table with basic data display

Ready to use
/blocks/table-simple
Striped Table
table

Striped Table

Alternating row colors with status badges

Ready to use
/blocks/table-striped
Bordered Table
table

Bordered Table

Grid-style table with visible borders

Ready to use
/blocks/table-bordered