Components

Card

In Progress

A surface for grouping related content. Choose a variant and pass data — no layout classes required.

Balance variant

Your current MNEE balance

$1,204.00

Active

Module type: Stripe Custom Payment

Use CardContainer when you need the card shell without an opinionated layout. Pass any children and add padding/background via className.

CardContainer is a generic shell — bring your own layout.

import { Card, CardContainer } from "@mnee-ui/ui"

Prop	Type	Default	Description
variant	"balance"	—	Required — selects the balance layout
title	string	—	Card heading
description	string?	—	Muted subtext below the title
amount	string	—	Large monetary figure displayed in the body
action	ReactNode?	—	Slot rendered in the footer (e.g. a Button)
loading	boolean?	false	Replaces content with animated skeleton placeholders
className	string?	—	Layout utilities only (margin, width)

Prop	Type	Default	Description
variant	"module"	—	Required — selects the module layout
title	string	—	Card heading
description	string?	—	Muted subtext below the title
status	"success" \| "warning" \| "error" \| "info" \| "default"?	—	Badge color shown next to the title
statusLabel	string?	—	Text inside the status badge
onEdit	() => void?	—	Renders an Edit button in the footer
onView	() => void?	—	Renders a View button in the footer
loading	boolean?	false	Replaces content with animated skeleton placeholders
className	string?	—	Layout utilities only (margin, width)