<CardGallery.Root>
{organizations.map((organization) => (
<CardGallery.Item key={organization.name}>
<CardGallery.Logo src={organization.logo}>
{organization.name.charAt(0)}
</CardGallery.Logo>
<CardGallery.Title>{organization.name}</CardGallery.Title>
<CardGallery.Description>{organization.category}</CardGallery.Description>
</CardGallery.Item>
))}
</CardGallery.Root>;The column count is not configured — the grid packs as many tiles as fit and
every tile shares the leftover space, so the same markup adapts from a sidebar
to a full page. itemMinWidth is the one knob: how narrow a tile may get
before a column is dropped.
Every part takes render, so a tile becomes a link (or anything else) without
wrapper elements:
<CardGallery.Item render={<a href={organization.href}>…</a>} />Pagination is yours to add or leave out: render Pagination
(or DataTable.Pagination) after the grid when the list is long, or pass the
full list for an all-at-once directory. Inside a table context,
DataTable's gallery view wires these parts to
the sorted, filtered row model for you.
API
CardGallery.Root
| Prop | Type | Default | |
|---|---|---|---|
itemMinWidth | string | "8.5rem" | Narrowest a card may get before the grid drops a column, as a CSS length. The column count follows from the container width alone — no breakpoint props to configure. |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <div> prop. Source: card-gallery/components/card-gallery-root.tsx.
CardGallery.Item
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <div> prop. Source: card-gallery/components/card-gallery-item.tsx.
The tile frame. Hover and pressed affordances appear only when it renders as
an <a> or <button>.
CardGallery.Logo
| Prop | Type | Default | |
|---|---|---|---|
alt | string | "" | alt for the image. Defaults to empty — the title sits right below. |
src | string | — | Image URL, shown large in a square frame. |
Plus every <div> prop. Source: card-gallery/components/card-gallery-logo.tsx.
The large square visual. Children are the fallback — shown while the image
loads or when src is absent.
CardGallery.Title
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <p> prop. Source: card-gallery/components/card-gallery-title.tsx.
CardGallery.Description
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <p> prop. Source: card-gallery/components/card-gallery-description.tsx.