Card

Data Display

A borderless solid surface with a top-lit curved edge.

Live preview

Project

Manage your project settings and deployments.

Solid surfaces, clear hierarchy and a top-lit curved edge.

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@nphuonha/ui-kit";

Usage

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
</Card>

Examples

Profile card

Combine the card parts with badges and actions.

Profile card

Avery Quinn

Product designer

Pro

Projects

1.2k

Followers

Following

API Reference

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
Card	div	—	Rounded solid surface with soft depth.
CardHeader	div	—	Title and description stack.
CardTitle	h3	—	Card heading.
CardDescription	p	—	Muted supporting text.
CardContent	div	—	Padded content area.
CardFooter	div	—	Actions area.