Skip to main content
ninna-ui
Components

React Card Components

Flexible card containers with header, body, footer, and media slots. Customize every internal with data-slot CSS targets.

import { Card } from "@ninna-ui/data-display";

<Card>
  <Card.Header>
    <Heading size="md">Card Title</Heading>
  </Card.Header>
  <Card.Body>
    <Text>Card content goes here.</Text>
  </Card.Body>
  <Card.Footer>
    <Button size="sm" color="primary">Action</Button>
  </Card.Footer>
</Card>

Key features

Compound API: Card.Header, Card.Body, Card.Footer

Media slot for images, videos, or gradients

Hover and interactive variants

data-slot CSS targets for every section

Responsive padding and spacing

Composes with Badge, Avatar, Text, Heading

Composable card structure

Cards are one of the most versatile UI patterns. Ninna UI's Card uses a compound API so you only render the sections you need. The Card component provides the container; Header, Body, and Footer are optional sub-components.

Component Docs

CardStatTable

FAQ