Card
Surface container rendering the canonical .card style.
A surface container rendering the canonical .card style — the same look as raw className="card" usages, consolidated into one component. Pass hover for an interactive lift.
Import
1import { Card } from "@yuhuanowo/yunui";Basic
Card
Pro plan
Everything in Basic, plus higher limits.
Hover
hover adds a border + shadow transition for clickable cards.
Hover lift
Hover me — the border and shadow animate.
Composing
Card is an unopinionated container — compose any content inside, including other primitives.
With action
Upgrade your plan
Unlock higher rate limits and priority support.
Parts
Card is usable on its own, but it also ships the five slots below — reach for
them when several cards must line their titles and actions up with each other,
rather than each one inventing its own padding.
| Part | Role |
|---|---|
Card | The surface itself (border, radius, background, optional hover). |
CardHeader | Header region, p-6, stacks its children with space-y-1.5. |
CardTitle | The heading — renders a real <h3>, so the page keeps a document outline. |
CardDescription | Muted supporting line under the title. |
CardContent | Body region; p-6 pt-0, so it sits flush under the header. |
CardFooter | Actions/meta row; p-6 pt-0, flex with centered items. |
Every part forwards its ref and all standard <div> (or <h3>/<p>) props.
Parts
Monthly usage
Resets on the 1st.
2,481,930
tokens of 5,000,000
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| hover | boolean | — | Add a hover lift (border + shadow transition). |
Card also forwards every standard <div> prop (className, onClick, style, …).