Card

A versatile card component system with modular architecture and dark mode support

Installation

Install the Card component using the nocta-ui CLI:

npx nocta-ui add card

Then import the components you need:

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  CardActions,
} from '@/components/ui/card';

Learn how to use the Card component in your projects

This is a basic card example showing the fundamental structure and styling.

Manage your project configuration and preferences

StatusActive

Members12

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Card content
`className`	`string`	-	Additional CSS classes

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Header content (usually title/description)
`className`	`string`	-	Additional CSS classes

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Title content
`className`	`string`	-	Additional CSS classes
`as`	`React.ElementType`	`'h3'`	Element/component used to render the title

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Description text
`className`	`string`	-	Additional CSS classes

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Main card content
`className`	`string`	-	Additional CSS classes

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Footer content
`className`	`string`	-	Additional CSS classes

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Action controls (buttons, links, etc.)
`className`	`string`	-	Additional CSS classes