Card

free

Card creates a bounded surface for related content, summaries, and nearby actions.

Every component matched spec on the first pass, and the whole project shipped two weeks ahead of schedule.

Marcus Webb

Design Lead, Northwind

5.0

import { PiQuotes, PiStarFill } from 'react-icons/pi'
import Avatar from '@/components/ui/avatar';
import Card from '@/components/ui/card';

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Card

pnpm dlx nateui@latest add Card

yarn dlx nateui@latest add Card

Examples

Basic

Customer profile

Keep normal card content on the default body padding and let the shared surface provide the border, radius, and background.

import Card from '@/components/ui/card';

export default function BasicDemo() {
  return (

Header And Footer

Team roadmap

Outlines the next three releases, who is driving each one, and where the open risks are.

Priya Anand

4h ago

import { PiDotsThree } from 'react-icons/pi'
import Avatar from '@/components/ui/avatar';
import Button from '@/components/ui/button';
import Card from '@/components/ui/card';

Divided Body

https://linear.app/acme/issue/pay-214

Homepage redesign - final.png

Sprint retro notes

2 linked tasks

Vendor contract.pdf

4 linked tasks

import {
    PiArrowsOut,
    PiDotsThreeVertical,
    PiDownloadSimple,

Borderless

Featured Stay

Two Days in Kyoto

Quiet ryokans, short train rides, and temples that open before the crowds.

import { PiMapPin } from 'react-icons/pi'
import Card from '@/components/ui/card';
import Tag from '@/components/ui/tag';

Clickable

Integrations

Connect the tools your team already uses without leaving the dashboard.

import Card from '@/components/ui/card';
import { ChevronRight } from '@/components/ui/icons';

export default function ClickableDemo() {

Media

Layout patterns that cut checkout

A walkthrough of the spacing, copy, and validation choices that move the needle on multi-step forms.

import { ChevronRight } from '@/components/ui/icons';
import Button from '@/components/ui/button';
import Card from '@/components/ui/card';

API

Card exposes a root surface and three compound sections for composing its content.

Card.Body is optional. Put direct children under Card for a simple edge-to-edge surface, and use Card.Body for default padding or an explicit body section.

Card

Card accepts the props below plus native props for the root div.

Prop	Description	Type	Default
`bordered`	Uses the default bordered card surface. Pass `false` for the shadow card treatment.	`boolean`	`true`
`children`	Card sections or direct children rendered inside the root surface.	`ReactNode`	-
`className`	Class names applied to the card root.	`string`	-
`clickable`	Adds pointer cursor and disables text selection on the card root.	`boolean`	`false`
`onClick`	Called when the card root is clicked.	`CardClickHandler`	-
`ref`	Ref forwarded to the card root.	`Ref<HTMLDivElement>`	-
`...nativeDivProps`	Native props for the root `div`.	`NativeCardDivProps`	-

Card.Header

Card.Header accepts the props below plus native props for its div.

Prop	Description	Type	Default
`bordered`	Adds the default bottom border and rounded top corners.	`boolean`	`true`
`children`	Header content rendered inside the section.	`ReactNode`	-
`className`	Class names applied to the header section.	`string`	-
`ref`	Ref forwarded to the header `div`.	`Ref<HTMLDivElement>`	-
`...nativeDivProps`	Native props for the header `div`.	`NativeCardDivProps`	-

Card.Body

Card.Body is optional and accepts the props below plus native props for its div. Use it when the card needs default padding or an explicit body section.

Prop	Description	Type	Default
`children`	Body content rendered inside the section.	`ReactNode`	-
`className`	Class names applied to the body section.	`string`	-
`ref`	Ref forwarded to the body `div`.	`Ref<HTMLDivElement>`	-
`...nativeDivProps`	Native props for the body `div`.	`NativeCardDivProps`	-

Card.Footer

Card.Footer accepts the props below plus native props for its div.

Prop	Description	Type	Default
`bordered`	Adds the default top border and rounded bottom corners.	`boolean`	`true`
`children`	Footer content rendered inside the section.	`ReactNode`	-
`className`	Class names applied to the footer section.	`string`	-
`ref`	Ref forwarded to the footer `div`.	`Ref<HTMLDivElement>`	-
`...nativeDivProps`	Native props for the footer `div`.	`NativeCardDivProps`	-

Header and footer also accept bordered, which defaults to true.

Types

type CardProps = ComponentPropsWithRef<'div'> & {
  clickable?: boolean;
  bordered?: boolean;
  onClick?: CardClickHandler;
};
 
type CardHeaderProps = ComponentPropsWithRef<'div'> & {
  bordered?: boolean;
};
 
type CardBodyProps = ComponentPropsWithRef<'div'>;
 
type CardFooterProps = ComponentPropsWithRef<'div'> & {
  bordered?: boolean;
};
 
type CardClickHandler = (event: MouseEvent<HTMLDivElement>) => void;
type NativeCardDivProps = ComponentPropsWithRef<'div'>;