Card

Documentation and examples for the Card component.

Preview

Card 1!

A card description

This is a card!

footer

Properties

Prop	Type	Default	Description
title	string	-	Headline of the card.
description	string	-	Sub-text below the title.
footer	ReactNode	-	Content at the bottom.
className	string	default classes	To add your own style.
color	"red" \| "blue" \| "green" \| "yellow"	blue	Color of the effect of the card.

Usage

Follow these steps to add and use Card.

Create next app (skip if you already have setup a next app)

terminal

npx create-next-app@latest --yes

Install

terminal

npx modui-uikit@latest add card

Implement

typescript

import { Card } from '@/components/ui/card'

export default function Example() {
  return (
    <Card 
      title="Project Alpha"
      color="red"
      subtitle="A new web application."
      footer="A footer!"
      action={
        <button>
          Hello!
        </button>
      }
    >
      This is the main content of the card.
    </Card>
  )
}