Card

All-purpose cards. Free, MIT · Data and metrics › Cards

A surface for related content. Compose it from parts, as named exports (CardHeader) or as members (Card.Header, Card.Title, Card.Description, Card.Body / Card.Content, Card.Footer).

Installation

npx valyro-cli@latest add card

npx shadcn@latest add https://valyro.xyz/r/card.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Card } from 'valyro-ui';

Props

Prop	Type	Default
`variant`	`'default' \| 'outline' \| 'interactive'`	`'default'`	`interactive` adds hover lift and a focus ring — pair it with `asChild` and a link or button.
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Inner padding and gap between sections; `none` also clips content to the rounded corners (e.g. edge-to-edge media).
`asChild`	`boolean`	`false`	Render the single child element (e.g. an <a>) with card styling.

Compound parts

Card.Header (CardHeader), Card.Title (CardTitle), Card.Description (CardDescription), Card.Body (CardContent), Card.Content (CardContent), Card.Footer (CardFooter)

Related components

Item Card — Row card: icon, title, description and a control on the right
Record Card — Record card: status, context, key fields and actions
Carousel — Carousel: scroll snap, swipe, autoplay, thumbnails
Empty State — No-data screen
Data Table — Tables with search and sorting
Data Grid — Grid for 100,000 rows: grouping, filters, inline editing
Virtual List — Virtual list for 100,000 rows
Bulk Action Bar — Actions for selected rows, with keyboard shortcuts
List Block — List with images or icons, descriptions and values
Description List — Key–value list: stacked, inline or a grid with icons
Tree View — Tree structures
Accordion — Collapsible sections

Previous: Timeline · Next: Item Card · All Data and metrics