# Paper Clip

Wire paper clip over the top edge of a card, optionally holding a paper tab with a handwritten label. Press the tab and it slides up out of the clip.

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

## Install

```bash
npx @lumioui/cli add paper-clip
```

## Import

```tsx
import { PaperClip } from "@/components/ui/paper-clip/paper-clip";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `children` | `React.ReactNode` | The surface being clipped — a card, a note, a photo. |
| `tab?` | `React.ReactNode` | Label on a paper tab held under the clip. A string is handwritten. |
| `position?` | `"left" | "center" | "right"` | Where along the top edge the clip sits. Default "left". |
| `tilt?` | `number` | Tab tilt in degrees. Default -3. |
| `tone?` | `"steel" | "primary"` | Wire colour. Default "steel". |
| `tabTone?` | `"paper" | "kraft"` | Tab paper. Default "paper". |
| `onPress?` | `PressableProps["onPress"]` | Called when the tab (or the bare clip) is pressed. |
| `haptic?` | `boolean` | Selection haptic as the tab lifts. Default true. |
| `disabled?` | `boolean` | — |
| `accessibilityLabel?` | `string` | — |

Source: https://lumioui.com/components/paper-clip