데이터와 피드백@neumorphism-ui/image-card

Image Card

표준 img와 figure/figcaption 의미를 유지하면서 이미지와 설명을 뉴모피즘 surface로 묶습니다. 이미지 로딩·최적화는 애플리케이션이나 프레임워크가 소유하고, 이 컴포넌트는 콘텐츠 구조와 표면만 제공합니다.

@neumorphism-ui/image-card

Registry JSON

미리보기

부드러운 파란 그라데이션의 워크스페이스 표지 — 디자인 시스템 워크스페이스 · 12 components

설치

npx shadcn@latest add @neumorphism-ui/image-card

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

import { ImageCard } from "@/components/ui/image-card";

Example

export default function Example() {
  return <ImageCard src="/workspace-cover.jpg" alt="부드러운 파란 그라데이션의 워크스페이스 표지" caption="Design system workspace · 12 components" />;
}

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`ImageCard`	`src`필수	`string`	`—`	표시할 이미지 URL입니다.
`ImageCard`	`alt`필수	`string`	`—`	이미지의 목적을 설명하는 대체 텍스트입니다.
`ImageCard`	`caption`	`ReactNode`	`—`	선택적인 figcaption 콘텐츠입니다.
`ImageCard`	`imageClassName`	`string`	`—`	기본 aspect와 object-fit 스타일을 확장합니다.
`ImageCard`	`figure props`	`React.ComponentProps<"figure">`	`—`	figure에 표준 HTML 속성을 전달합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성