NOCTA UI

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/cli add card

Then import the components you need:

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

Examples

Default 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

API Reference

Card

Prop

Type

CardHeader

Prop

Type

CardTitle

Prop

Type

CardDescription

Prop

Type

CardContent

Prop

Type

CardFooter

Prop

Type

CardActions

Prop

Type