Image Dark
An adaptive image component that dynamically switches between light and dark mode sources using standard HTML img elements with zero layout shift and no hydration mismatch.
1.2 KB
•Updated on August 29, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-image-darkUsage
Code
import { ImageDark } from '@/components/spaceui/image-dark'Code
<ImageDark src="/logo.svg" darkSrc="/logo-dark.svg" alt="Brand Logo" width={48} height={48} />API Reference
ImageDark Props
ImageDark accepts all standard HTML <img> element attributes (width, height, loading, decoding, alt, className, etc.) along with the following:
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | Required | The primary/light mode image source URL or path. |
darkSrc | string | - | The dark mode image source URL or path. Swapped automatically in dark theme. |
alt | string | Alternative text description for accessibility. | |
className | string | - | Additional classes merged onto both image elements (dark:hidden / hidden dark:block). |
Card Integration
Use standard image sizing and container styling inside cards, hero banners, or device mockups.
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
