useCard

Headless hook for building flexible card containers with custom markup.

Pro Subscription

Everything you need to scale your workflow

Get unlimited access to all features, priority support, and advanced analytics to help your team grow faster.

$29 / month

basic-demo

Usage#

import { useCard } from '@primereact/headless/card';

const { rootProps } = useCard();
 
<div {...rootProps}>
    <div></div>
    <p></p>
</div>;

useCard returns spread-ready rootProps with no state or props — see Primitive for a component-based API.

Features#

Spread-ready rootProps for the root container element
Stateless hook — no internal state or side effects
Full freedom over internal HTML structure (headers, footers, images, forms)

Behavior#

Container Structure#

Build the card layout using native HTML elements. There are no required children or structural constraints — compose headers, titles, content, and footers in any order.

const { rootProps } = useCard();
 
<div {...rootProps}>
    <img src="/header.jpg" alt="Header" />
    <div>
        <h2>Title</h2>
        <p>Subtitle</p>
    </div>
    <div>Main content</div>
    <div>Footer</div>
</div>;

Custom Styling with Data Attributes#

[data-scope='card'][data-part='root'] {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

API#

useCard#

Name	Type	Default

Accessibility#

Inherits keyboard behavior from interactive children — the card itself is non-focusable by default. See Primitive for full WAI-ARIA compliance details.