CardView

A responsive card grid that maps each data item to a renderCard output. Use inside DataViewContainer or standalone for a masonry/grid display.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { CardView } from "@xocialive/ui-components";

Basic usage

<CardView
  data={projects}
  renderCard={(project) => (
    <GenericCard key={project.id} onClick={() => navigate(`/projects/${project.id}`)}>
      <Typography variant="h6">{project.name}</Typography>
      <Typography variant="body2">{project.description}</Typography>
    </GenericCard>
  )}
  isLoading={isLoading}
  columns={{ xs: 1, sm: 2, md: 3, lg: 4 }}
/>

Props

Prop	Type	Default	Description
data	T[]	—	Card data array
renderCard	(item: T) => ReactNode	—	Card renderer
isLoading	boolean	false	Shows skeleton cards during loading
skeletonCount	number	8	Number of skeleton cards
columns	Partial<Record<Breakpoint, number>>	{ xs: 1, sm: 2, md: 3 }	Responsive column counts
sx	SxProps<Theme>	—	Root grid style overrides