Twigs Logo
Playground
Get StartedComponentsIconsEditorTools

Image

A flexible image component that wraps the HTML img element with enhanced styling capabilities.

Import

import { Image } from "@sparrowengg/twigs-react";

Usage

const ImageExample = () => {
  return (
    <Image
      src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&h=200&fit=crop&crop=center"
      alt="Mountain landscape"
      css={{
        width: 200,
        height: 200,
        borderRadius: "$md"
      }}
    />
  );
};

Props

Image

PropTypeDefault
src?
string
-
alt?
string
-
css?
object
-
className?
string
-

Chip

Compact UI element used to display tags, labels, or filter options. Perfect for categorization, selection states, and interactive content organization.

Table

A structured data display component for organizing and presenting tabular information. Perfect for displaying lists, datasets, and structured content.