Basic Components

Img

Displays images with VaneUI styling support including sizes, shapes, borders, shadows, and object-fit options.

const placeholderSrc = "https://placehold.co/300x200/e2e8f0/64748b?text=Image";
const portraitSrc = "https://placehold.co/200x300/cbd5e1/475569?text=Portrait";
const avatarSrc = "https://placehold.co/120x120/c7d2fe/4338ca?text=Avatar";

Basic Image

Render an image with the Img component.

<Img src={placeholderSrc} alt="Sample landscape photo" />

Alt Text

Always pass a descriptive alt attribute. Use an empty alt="" for decorative images so assistive technology can skip them.

Team standing in front of the office building

<Row flexWrap>
  <Img src={placeholderSrc} alt="Team standing in front of the office building" />
  <Img src={placeholderSrc} alt="" />
</Row>

Shapes

Control border radius with rounded (default), pill (great for avatars), and sharp.

rounded (default)

pill

sharp

<Row flexWrap>
  <Col itemsCenter>
    <Img src={placeholderSrc} alt="Rounded image" />
    <Text sm secondary>rounded (default)</Text>
  </Col>
  <Col itemsCenter>
    <Img pill src={avatarSrc} alt="Avatar" />
    <Text sm secondary>pill</Text>
  </Col>
  <Col itemsCenter>
    <Img sharp src={placeholderSrc} alt="Sharp image" />
    <Text sm secondary>sharp</Text>
  </Col>
</Row>

Border & Shadow

Add border and shadow props for visual emphasis.

border

shadow

border + shadow

<Row flexWrap>
  <Col itemsCenter>
    <Img border src={placeholderSrc} alt="Bordered image" />
    <Text sm secondary>border</Text>
  </Col>
  <Col itemsCenter>
    <Img shadow src={placeholderSrc} alt="Image with shadow" />
    <Text sm secondary>shadow</Text>
  </Col>
  <Col itemsCenter>
    <Img border shadow src={placeholderSrc} alt="Bordered image with shadow" />
    <Text sm secondary>border + shadow</Text>
  </Col>
</Row>

Sizes

Images support five sizes: xs, sm, md (default), lg, xl. Size controls border-radius scaling.

md (default)

<Row flexWrap itemsEnd>
  <Col itemsCenter>
    <Img xs src={placeholderSrc} alt="xs image" />
    <Text sm secondary>xs</Text>
  </Col>
  <Col itemsCenter>
    <Img sm src={placeholderSrc} alt="sm image" />
    <Text sm secondary>sm</Text>
  </Col>
  <Col itemsCenter>
    <Img src={placeholderSrc} alt="md image" />
    <Text sm secondary>md (default)</Text>
  </Col>
  <Col itemsCenter>
    <Img lg src={placeholderSrc} alt="lg image" />
    <Text sm secondary>lg</Text>
  </Col>
  <Col itemsCenter>
    <Img xl src={placeholderSrc} alt="xl image" />
    <Text sm secondary>xl</Text>
  </Col>
</Row>

Object Fit

Control how an image fills a sized container with objectCover (default), objectContain, and objectFill. The examples below constrain the image to a fixed box so the difference is visible.

objectCover (default)

objectContain

objectFill

<Row flexWrap>
  <Col itemsCenter>
    <Img src={portraitSrc} alt="Cover crops to fill the box" style={{ width: 200, height: 150 }} />
    <Text sm secondary>objectCover (default)</Text>
  </Col>
  <Col itemsCenter>
    <Img objectContain src={portraitSrc} alt="Contain fits inside the box" style={{ width: 200, height: 150 }} />
    <Text sm secondary>objectContain</Text>
  </Col>
  <Col itemsCenter>
    <Img objectFill src={portraitSrc} alt="Fill stretches to the box" style={{ width: 200, height: 150 }} />
    <Text sm secondary>objectFill</Text>
  </Col>
</Row>

Inside a Card

Img composes naturally inside Card for media tiles. Use wFull so the image spans the card width.

Harbor Sunset

Captured last weekend on a walk along the pier.

Forest Trail

Early morning hike through the pine forest.

<Row flexWrap>
  <Card noPadding overflowHidden style={{ width: 240 }}>
    <Img sharp wFull src={placeholderSrc} alt="Sunset over the harbor" style={{ height: 140 }} />
    <Stack>
      <Title sm>Harbor Sunset</Title>
      <Text sm secondary>Captured last weekend on a walk along the pier.</Text>
    </Stack>
  </Card>
  <Card noPadding overflowHidden style={{ width: 240 }}>
    <Img sharp wFull src={placeholderSrc} alt="Forest trail at dawn" style={{ height: 140 }} />
    <Stack>
      <Title sm>Forest Trail</Title>
      <Text sm secondary>Early morning hike through the pine forest.</Text>
    </Stack>
  </Card>
</Row>

Native HTML Attributes

Img forwards all standard <img> attributes including loading, decoding, srcSet, sizes, referrerPolicy, and crossOrigin. Use loading="lazy" for below-the-fold images.

<Img
  src={placeholderSrc}
  alt="Lazy-loaded image"
  loading="lazy"
  decoding="async"
/>

Img Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`brand`	Appearance		Brand color appearance (blue)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inherit`	Appearance		Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`link`	Appearance		Link color appearance (blue, for hyperlinks)
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`pill`	Shape		Fully rounded corners (circular)
`rounded`	Shape	✓	Medium rounded corners (default)
`sharp`	Shape		No rounded corners (square)
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant		Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`border`	Border		Enable border on all sides
`borderB`	Border		Enable border on bottom
`borderL`	Border		Enable border on left
`borderR`	Border		Enable border on right
`borderT`	Border		Enable border on top
`borderX`	Border		Enable border on left and right
`borderY`	Border		Enable border on top and bottom
`noBorder`	Border		Disable all borders
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display		Flex display - flexbox container
`grid`	Display		Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display		Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`focusVisible`	Focus Visible		Enable focus-visible outline
`noFocusVisible`	Focus Visible		Disable focus-visible outline
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items		Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items		Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify		Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`objectContain`	Object Fit		Contain - image fits inside container, may have letterboxing
`objectCover`	Object Fit	✓	Cover - image covers container, may be cropped
`objectFill`	Object Fit		Fill - image stretches to fill container
`objectNone`	Object Fit		None - image displays at natural size
`objectScaleDown`	Object Fit		Scale down - like contain, but never scales up
`overflowAuto`	Overflow		Auto overflow - show scrollbars if needed
`overflowClip`	Overflow		Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow		Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow		Scroll overflow - always show scrollbars
`overflowVisible`	Overflow		Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow		Auto overflow on X-axis only
`overflowXClip`	Overflow		Clip overflow on X-axis only
`overflowXHidden`	Overflow		Hidden overflow on X-axis only
`overflowXScroll`	Overflow		Scroll overflow on X-axis only
`overflowXVisible`	Overflow		Visible overflow on X-axis only
`overflowYAuto`	Overflow		Auto overflow on Y-axis only
`overflowYClip`	Overflow		Clip overflow on Y-axis only
`overflowYHidden`	Overflow		Hidden overflow on Y-axis only
`overflowYScroll`	Overflow		Scroll overflow on Y-axis only
`overflowYVisible`	Overflow		Visible overflow on Y-axis only
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`responsive`	Responsive		Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`noRing`	Ring		Disable focus ring
`ring`	Ring		Enable focus ring
`noShadow`	Shadow		Disable drop shadow
`shadow`	Shadow		Enable drop shadow
`transparent`	Transparent		Disable background color - makes component background transparent
`wAuto`	Width		Set width to auto
`wFit`	Width		Set width to fit-content
`wFull`	Width		Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint