Mokri

Preview

Enter your credentials to access your account

Password

Remember me

<> import.ts

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

<> component.tsx

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

<Card title="Card Title" description="Card description">
  <p>Card content goes here.</p>
</Card>

Displays a card with header, content, and footer.

<> import.ts

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

Prop	Type	Default	Description
`title`	`string`	—	Title text for the card
`description`	`string`	—	Description text for the card
`children`	`React.ReactNode`	—	Content to display inside the card
`className`	`string`	`""`	Additional CSS classes
`dashed`	`boolean`	`false`	Whether to use dashed border
`shadow`	`boolean`	`true`	Whether to show shadow
`padding`	`string`	`"p-6"`	Padding classes for the card
`rounded`	`string`	`"rounded-lg"`	Rounded corner classes
`titleClassName`	`string`	`""`	Additional CSS classes for title
`descriptionClassName`	`string`	`""`	Additional CSS classes for description
`contentClassName`	`string`	`""`	Additional CSS classes for content

<> example.tsx

// Basic card
<Card title="Card Title" description="Card description">
  <p>Card content goes here</p>
</Card>

<> example.tsx

// Card with dashed border
<Card dashed={true} title="Dashed Card">
  <p>This card has a dashed border</p>
</Card>

<> example.tsx

// Card without shadow
<Card shadow={false} title="No Shadow">
  <p>This card has no shadow</p>
</Card>

<> example.tsx

// Card with custom padding
<Card padding="p-4" title="Custom Padding">
  <p>This card has custom padding</p>
</Card>