DinachiUIDinachiUI

Card

Layout

A flexible container component for displaying content with optional header, body, and footer.

Installation

bash
1npx @dinachi/cli@latest add card

Run the CLI command above to automatically install the component and its dependencies.

Examples

Default Card

A basic card with header and content

Card Title

Card description goes here.

This is the main content area of the card. You can add any content here.

Card with Footer

Card with header, content, and footer with actions

Create Account

Enter your details to create a new account.

Card Variations

Multiple card styles for pricing comparison

Free Plan

For personal use

$0

per month

Pro Plan

For teams and businesses

$29

per month

Interactive Card

Card with hover effects and progress indicator

Project Status

Active

Last updated 2 hours ago

Progress75%

API Reference

PropTypeDefaultDescription
className
string—Additional CSS classes to apply to the card