avatar
UI
Components
Changelog
LobeHub UI
Antd Components
Lucide Icons
CSSinJS
Ctrl
K
Chat
ChatInputArea
ChatItem
EditableMessage
Data Display
Card
ChatMarkdown
CollapseGroup
Descriptions
Highlighter
JsonViewer
LogViewer
ProCard
RichTextEditor
Status
Table
Tree
Data Entry
CodeEditor
Form
Mentions
MonacoEditor
SelectCard
SliderInput
Feedback
Alert
DragPanel
Drawer
Modal
Notification
General
Breadcrumb
Typography
WaveformIcon
Layout
Divider
Page
Navigation
ButtonGroup
Dropdown
Theme
ConfigProvider
Logo
TTS
useSpeechSynthes
Utils
FormHelper

Card

A container for displaying information.

import { Card } from '@yuntijs/ui';
NPM
UNPKG
BundlePhobia
PackagePhobia
Anvaka Graph
Source
Edit
Previous
EditableMessage
Next
ChatMarkdown

Resources

Lobe UI-AIGC Components
Lobe Icon-AI / LLM Icon Collection
Lobe Charts-Modern Charts
Lobe TTS-TTS / STT Library

Community

Report Bug
Request Feature

Help

GitHub
Changelog

More Products

🤯 Lobe Chat-AI / LLM Chat Framework
🧸 Lobe Vidol-Virtual Idols for EveryOne
🅰️ Lobe Theme-Stable Diffusion Extension
🌐 Lobe i18n-AI i18next CLI
Copyright © 2022-2026
Made with ☁️ by YuntiJS
LobeHub

Usage

based on antd Card component.

Simple usage

JSX
import { Card } from '@yuntijs/ui';

export default () => {
  return (
    <Card
      title= 'YuntiUI Card'
      bordered={true}
      loading={false}
      hoverable={true}
    >
    The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.
    </Children>
  );
};

Card.Meta usage

Card.Grid usage

Card.Tab usage

Playground

APIs

NameDescriptionTypeDefault
prefixCls--string--
title--ReactNode--
extra--ReactNode--
bordered--boolean--
headStyle--{}--
bodyStyle--{}--
style--{}--
loading--boolean--
hoverable--boolean--
children--ReactNode--
id--string--
className--string--
rootClassName--string--
size--"small"|"default"--
type--inner--
cover--ReactNode--
actions--ReactNode[]--
tabList--CardTabListType[]--
tabBarExtraContent--|string|number|unknown|ReactElement|unknown|ReactPortal|Promise<AwaitedReactNode>|Partial___type|boolean--
onTabChange--(key:string)=>void--
activeTabKey--string--
defaultActiveTabKey--string--
tabProps--unknown--
classNames--{title?:any;header?:any;extra?:any;body?:any;actions?:any;cover?:any}--
styles--{title?:any;header?:any;extra?:any;body?:any;actions?:any;cover?:any}--
variant--"outlined"|"borderless"--
onChange--(event:E)=>void--
prefix--string--
onSelect--(event:E)=>void--
autoFocus--boolean--
defaultValue--string|number|unknown--
onFocus--(event:E)=>void--
onBlur--(event:E)=>void--
color--string--
defaultChecked--boolean--
suppressContentEditableWarning--boolean--
suppressHydrationWarning--boolean--
accessKey--string--
autoCapitalize--off|none|on|sentences|words|characters|string--
contentEditable--Booleanish|inherit|plaintext-only--
contextMenu--string--
dir--string--
draggable--true|false|boolean--
enterKeyHint--"enter"|"done"|"go"|"next"|"previous"|"search"|"send"--
hidden--boolean--
lang--string--
nonce--string--
slot--string--
spellCheck--true|false|boolean--
tabIndex--number--
translate--"yes"|"no"--
radioGroup--string--
role--string|none|search|alert|alertdialog|application|article|banner|button|cell|checkbox|columnheader|combobox|complementary|contentinfo|definition|dialog|directory|document|feed|figure|form|grid|gridcell|group|heading|img|link|list|listbox|listitem|log|main|marquee|math|menu|menubar|menuitem|menuitemcheckbox|menuitemradio|navigation|note|option|presentation|progressbar|radio|radiogroup|region|row|rowgroup|rowheader|scrollbar|searchbox|separator|slider|spinbutton|status|switch|tab|table|tablist|tabpanel|term|textbox|timer|toolbar|tooltip|tree|treegrid|treeitem--
about--string--
content--string--
datatype--string--
inlist--any--
property--string--
rel--string--
resource--string--
rev--string--
typeof--string--
vocab--string--
autoCorrect--string--
autoSave--string--
itemProp--string--
itemScope--boolean--
itemType--string--
itemID--string--
itemRef--string--
results--number--
security--string--
unselectable--"off"|"on"--
popover--""|"auto"|"manual"--
popoverTargetAction--"toggle"|"show"|"hide"--
popoverTarget--string--
inert--boolean--
inputModeHints at the type of data that might be entered by the user while editing the element or its contents"none"|"search"|"text"|"tel"|"url"|"email"|"numeric"|"decimal"--
isSpecify that a standard HTML element should behave like a defined custom built-in elementstring--
exportparts--string--
part--string--
dangerouslySetInnerHTML--{__html:string|TrustedHTML}--
onCopy--(event:E)=>void--
onCopyCapture--(event:E)=>void--
onCut--(event:E)=>void--
onCutCapture--(event:E)=>void--
onPaste--(event:E)=>void--
onPasteCapture--(event:E)=>void--
onCompositionEnd--(event:E)=>void--
onCompositionEndCapture--(event:E)=>void--
onCompositionStart--(event:E)=>void--
onCompositionStartCapture--(event:E)=>void--
onCompositionUpdate--(event:E)=>void--
onCompositionUpdateCapture--(event:E)=>void--
onFocusCapture--(event:E)=>void--
onBlurCapture--(event:E)=>void--
onChangeCapture--(event:E)=>void--
onBeforeInput--(event:E)=>void--
onBeforeInputCapture--(event:E)=>void--
onInput--(event:E)=>void--
onInputCapture--(event:E)=>void--
onReset--(event:E)=>void--
onResetCapture--(event:E)=>void--
onSubmit--(event:E)=>void--
onSubmitCapture--(event:E)=>void--
onInvalid--(event:E)=>void--
onInvalidCapture--(event:E)=>void--
onLoad--(event:E)=>void--
onLoadCapture--(event:E)=>void--
onError--(event:E)=>void--
onErrorCapture--(event:E)=>void--
onKeyDown--(event:E)=>void--
onKeyDownCapture--(event:E)=>void--
onKeyPress--(event:E)=>void--
onKeyPressCapture--(event:E)=>void--
onKeyUp--(event:E)=>void--
onKeyUpCapture--(event:E)=>void--
onAbort--(event:E)=>void--
onAbortCapture--(event:E)=>void--
onCanPlay--(event:E)=>void--
onCanPlayCapture--(event:E)=>void--
onCanPlayThrough--(event:E)=>void--
onCanPlayThroughCapture--(event:E)=>void--
onDurationChange--(event:E)=>void--
onDurationChangeCapture--(event:E)=>void--
onEmptied--(event:E)=>void--
onEmptiedCapture--(event:E)=>void--
onEncrypted--(event:E)=>void--
onEncryptedCapture--(event:E)=>void--
onEnded--(event:E)=>void--
onEndedCapture--(event:E)=>void--
onLoadedData--(event:E)=>void--
onLoadedDataCapture--(event:E)=>void--
onLoadedMetadata--(event:E)=>void--
onLoadedMetadataCapture--(event:E)=>void--
onLoadStart--(event:E)=>void--
onLoadStartCapture--(event:E)=>void--
onPause--(event:E)=>void--
onPauseCapture--(event:E)=>void--
onPlay--(event:E)=>void--
onPlayCapture--(event:E)=>void--
onPlaying--(event:E)=>void--
onPlayingCapture--(event:E)=>void--
onProgress--(event:E)=>void--
onProgressCapture--(event:E)=>void--
onRateChange--(event:E)=>void--
onRateChangeCapture--(event:E)=>void--
onSeeked--(event:E)=>void--
onSeekedCapture--(event:E)=>void--
onSeeking--(event:E)=>void--
onSeekingCapture--(event:E)=>void--
onStalled--(event:E)=>void--
onStalledCapture--(event:E)=>void--
onSuspend--(event:E)=>void--
onSuspendCapture--(event:E)=>void--
onTimeUpdate--(event:E)=>void--
onTimeUpdateCapture--(event:E)=>void--
onVolumeChange--(event:E)=>void--
onVolumeChangeCapture--(event:E)=>void--
onWaiting--(event:E)=>void--
onWaitingCapture--(event:E)=>void--
onAuxClick--(event:E)=>void--
onAuxClickCapture--(event:E)=>void--
onClick--(event:E)=>void--
onClickCapture--(event:E)=>void--
onContextMenu--(event:E)=>void--
onContextMenuCapture--(event:E)=>void--
onDoubleClick--(event:E)=>void--
onDoubleClickCapture--(event:E)=>void--
onDrag--(event:E)=>void--
onDragCapture--(event:E)=>void--
onDragEnd--(event:E)=>void--
onDragEndCapture--(event:E)=>void--
onDragEnter--(event:E)=>void--
onDragEnterCapture--(event:E)=>void--
onDragExit--(event:E)=>void--
onDragExitCapture--(event:E)=>void--
onDragLeave--(event:E)=>void--
onDragLeaveCapture--(event:E)=>void--
onDragOver--(event:E)=>void--
onDragOverCapture--(event:E)=>void--
onDragStart--(event:E)=>void--
onDragStartCapture--(event:E)=>void--
onDrop--(event:E)=>void--
onDropCapture--(event:E)=>void--
onMouseDown--(event:E)=>void--
onMouseDownCapture--(event:E)=>void--
onMouseEnter--(event:E)=>void--
onMouseLeave--(event:E)=>void--
onMouseMove--(event:E)=>void--
onMouseMoveCapture--(event:E)=>void--
onMouseOut--(event:E)=>void--
onMouseOutCapture--(event:E)=>void--
onMouseOver--(event:E)=>void--
onMouseOverCapture--(event:E)=>void--
onMouseUp--(event:E)=>void--
onMouseUpCapture--(event:E)=>void--
onSelectCapture--(event:E)=>void--
onTouchCancel--(event:E)=>void--
onTouchCancelCapture--(event:E)=>void--
onTouchEnd--(event:E)=>void--
onTouchEndCapture--(event:E)=>void--
onTouchMove--(event:E)=>void--
onTouchMoveCapture--(event:E)=>void--
onTouchStart--(event:E)=>void--
onTouchStartCapture--(event:E)=>void--
onPointerDown--(event:E)=>void--
onPointerDownCapture--(event:E)=>void--
onPointerMove--(event:E)=>void--
onPointerMoveCapture--(event:E)=>void--
onPointerUp--(event:E)=>void--
onPointerUpCapture--(event:E)=>void--
onPointerCancel--(event:E)=>void--
onPointerCancelCapture--(event:E)=>void--
onPointerEnter--(event:E)=>void--
onPointerLeave--(event:E)=>void--
onPointerOver--(event:E)=>void--
onPointerOverCapture--(event:E)=>void--
onPointerOut--(event:E)=>void--
onPointerOutCapture--(event:E)=>void--
onGotPointerCapture--(event:E)=>void--
onGotPointerCaptureCapture--(event:E)=>void--
onLostPointerCapture--(event:E)=>void--
onLostPointerCaptureCapture--(event:E)=>void--
onScroll--(event:E)=>void--
onScrollCapture--(event:E)=>void--
onScrollEnd--(event:E)=>void--
onScrollEndCapture--(event:E)=>void--
onWheel--(event:E)=>void--
onWheelCapture--(event:E)=>void--
onAnimationStart--(event:E)=>void--
onAnimationStartCapture--(event:E)=>void--
onAnimationEnd--(event:E)=>void--
onAnimationEndCapture--(event:E)=>void--
onAnimationIteration--(event:E)=>void--
onAnimationIterationCapture--(event:E)=>void--
onToggle--(event:E)=>void--
onBeforeToggle--(event:E)=>void--
onTransitionCancel--(event:E)=>void--
onTransitionCancelCapture--(event:E)=>void--
onTransitionEnd--(event:E)=>void--
onTransitionEndCapture--(event:E)=>void--
onTransitionRun--(event:E)=>void--
onTransitionRunCapture--(event:E)=>void--
onTransitionStart--(event:E)=>void--
onTransitionStartCapture--(event:E)=>void--
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).|bivarianceHack|RefObject--
key--Key|--
YuntiUI Card
extra
example
The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.
YuntiUI Card.Meta
The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.
YuntiUI Card.Grid
The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.
The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.
The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.
Themeable
Fast
Light & Dark UI
More

Provides a simple way to customize default themes, you can change the colors, fonts, breakpoints and everything you need.

YuntiUI Card
extra
The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.