# Postage Stamp

Postage stamp with a perforated edge drawn in SVG, a printed value and country, and an optional postmark inked across the corner. Press it to lift it off the envelope.

> Composed · Free · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add postage-stamp
```

## Import

```tsx
import { perforatedPath, PostageStamp } from "@/components/ui/postage-stamp/postage-stamp";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `image?` | `ImageSourcePropType` | Art printed in the panel. |
| `children?` | `React.ReactNode` | Any content in place of an image (an illustration, a glyph on colour). |
| `value?` | `string` | Face value printed on the margin, e.g. "€1.20". |
| `country?` | `string` | Issuing country printed on the margin. |
| `postmark?` | `string` | Postmark text inked over the top-right corner, e.g. "LISBOA · 12 OCT". |
| `width?` | `number` | Stamp width in points. Default 112. |
| `aspectRatio?` | `number` | Width / height. Default 0.8 (portrait). |
| `perforation?` | `number` | Radius of the perforation bites. Default 3.5. |
| `tilt?` | `number` | Resting tilt in degrees. Default -3. |
| `haptic?` | `boolean` | Selection haptic as it lifts. Default true. |
| `disabled?` | `boolean` | — |
| `accessibilityLabel?` | `string` | — |

Source: https://lumioui.com/components/postage-stamp