Card Component
Composable React card component with header, body and footer sections. Supports outline, elevated, ghost and transparent variants, hover states and padding scales — built with Tailwind CSS.
Import
1import { Card, CardHeader, CardBody, CardFooter } from "@neuctra/ui";Basic Usage
Compose a card from CardHeader, CardBody and CardFooter. Sections inherit the card's padding scale automatically.
Project Settings
Manage your project configuration
Cards group related content and actions.
Variants
Five surface styles: default, outline, elevated, ghost and transparent.
Hoverable
Add hoverable for a lift effect on interactive cards.
Props
All available props for the Card component.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "elevated" | "ghost" | "transparent" | "default" | Visual style of the card surface |
| padding | "none" | "sm" | "md" | "lg" | "md" | Padding scale inherited by all card sections |
| hoverable | boolean | false | Lift the card with a shadow on hover |
| CardHeader.title | ReactNode | — | Header heading content |
| CardHeader.description | ReactNode | — | Muted line under the title |
| CardHeader.icon | ReactNode | — | Leading icon slot |
| CardHeader.action | ReactNode | — | Right-aligned action slot (menu, button…) |
| CardHeader.iconClassName | string | — | Styles the leading icon wrapper. |
| CardHeader.titleClassName | string | — | Styles the title heading. |
| CardHeader.descriptionClassName | string | — | Styles the description text. |
| CardHeader.actionClassName | string | — | Styles the right-aligned action wrapper. |
| className / style | string / CSSProperties | — | Available on Card and every section; native div props are forwarded |
Accessibility
- Card renders a plain region — headings inside CardHeader use a semantic <h3>.
- All sections forward refs and native attributes (id, aria-*, data-*).
Frequently Asked Questions
How do I install and import the Card component?
Install the @neuctra/ui package, then import it with: import { Card } from "@neuctra/ui";
What variants and sizes does Card support?
Card supports variants: default, outline, elevated, ghost, transparent. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Card component accessible?
Card is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.