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 cardThen import the components you need:
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
CardActions,
} from '@/components/ui/card';Basic Usage
Simple Card
Getting Started
Learn how to use the Card component in your projects
This is a basic card example showing the fundamental structure and styling.
Card with Actions
Project Settings
Manage your project configuration and preferences
StatusActive
Members12
Notification Card
System Update
A new version is available
Version 2.1.0 includes performance improvements and bug fixes. Update now to get the latest features.
Stats Card
Analytics Overview
Key metrics for this month
2.4k
Users
98%
Uptime
Customization
Custom Styling
All components accept a className prop for custom styling:
<Card className="max-w-lg border-2 border-purple-200">
<CardHeader className="bg-purple-50">
<CardTitle className="text-purple-900">Custom Card</CardTitle>
</CardHeader>
</Card>Dynamic Title Element
Use the as prop on CardTitle to change the heading level:
<CardTitle as="h1">Main Title</CardTitle>
<CardTitle as="h2">Section Title</CardTitle>
<CardTitle as="div">Custom Element</CardTitle>