# Ticket tear

> Pull a ticket stub and it tears along the perforation hole by hole, then drops away.

- Type: Component (special)
- Access: Arc Pro
- Page: https://uiarc.dev/components/ticket-tear
- Markdown: https://uiarc.dev/components/ticket-tear/markdown
- Source file: `registry/components/ticket-tear/ticket-tear.tsx`
- Dependencies: motion
- Keywords: special, gesture, ticket, new, ticket tear, tear off stub, perforated ticket, event ticket, boarding pass, coupon tear, react ticket, tear animation

## When to use

- Event tickets, boarding passes, and coupons that are used once.
- A playful confirmation step where tearing means committing.

## When not to use

- Use hold-to-confirm or a dialog for destructive actions that need clear wording.
- Use a plain card for tickets that are only displayed, not redeemed.

## Installation

Ticket tear is part of Arc Pro. The live preview is public; the source and install command need Pro.

### CLI with a Pro token

1. Create a token in your account and set it in the environment (or `.env.local`). Never commit it.

```bash
export ARC_PRO_TOKEN=arc_pro_...
```

2. Add the Pro registry to `components.json`:

```json
{
  "registries": {
    "@uiarc": "https://uiarc.dev/r/{name}.json",
    "@uiarc-pro": {
      "url": "https://uiarc.dev/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${ARC_PRO_TOKEN}"
      }
    }
  }
}
```

3. Install:

```bash
npx shadcn@latest add @uiarc-pro/ticket-tear
```

### Manual

Signed-in Pro members can copy the source from the Manual tab on the docs page.

- Plans: https://uiarc.dev/pricing
- Create a Pro token: https://uiarc.dev/account#pro-access
- Setup guide: https://uiarc.dev/docs/ai#pro-access

## Usage

```tsx
import { TicketTear } from "@/components/arc/ticket-tear/ticket-tear";

export function Ticket() {
  const [torn, setTorn] = useState(false);
  return (
    <TicketTear torn={torn} onTornChange={setTorn} label="Tear off stub to check in"
      stub={<div className="stub">Row F, seat 12</div>}>
      <div className="ticket">
        <p>Arc Conf</p>
        <p>Teatro Tivoli, Lisbon</p>
      </div>
    </TicketTear>
  );
}
```

## API reference

### TicketTear

An event ticket with a perforated stub. Pulling the stub rips it along the dotted line from the top with ragged, fibrous edges; torn through or flicked, the rip races to the bottom and the stub peels away with a spin.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` (required) | `ReactNode` | – | The main ticket body. |
| `stub` (required) | `ReactNode` | – | The stub right of the perforation. |
| `torn` | `boolean` | – | Controlled torn state. Setting it back to false puts a fresh stub on; setting it to true tears it off. |
| `defaultTorn` | `boolean` | `false` | Initial state when uncontrolled. |
| `onTornChange` | `(torn: boolean) => void` | – | Called once the stub comes off. |
| `stubWidth` | `number` | `104` | Stub width in px. |
| `label` | `string` | `"Tear off stub"` | Accessible name of the stub control. |
| `className` | `string` | – | Extra class on the root. |
| `style` | `CSSProperties` | – | Inline styles on the root. Set --ticket-paper to change the paper color. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Focuses the stub. |
| Enter / Space | Tears the stub all the way and drops it. |

## Accessibility

- The stub is role="button" with the label as its name.
- The flap copy of the stub used for the bend is aria-hidden, so the stub is read once.
- A polite status announces "Stub torn off".

## Motion

- Pulling down or away tears the perforation from the top, tracking the pointer directly; the tear only grows, like real paper.
- The edge passes through the center of each hole and wanders between them, coarse and fine, with loose paper fibers just past it on both sides.
- The loose flap follows the pull on a spring, so it has weight, and springs most of the way back when released mid-tear.
- Enter, Space or the torn prop rip the rest on their own, accelerating like a perforation that has started to give; a flick finishes it even faster.
- Freed, the stub pops up a hair, falls with gravity, drifts with the release speed, spins on a spring, and fades in about half a second.
- Touch devices get a tiny vibration as the tear crosses each hole, where supported.
- Reduced motion removes the bend, the fibers and the fall; the stub fades out.

## Responsive behavior

- The ticket fills its width; the stub keeps a fixed width and the body shrinks, down to 320px screens.
- Pointer capture keeps the tear tracking outside the stub, and touch-action is disabled on the stub only.

## Performance

- The tear is clip-path polygons driven by motion values; React does not re-render while dragging.
- Notches and holes are CSS masks, so the paper stays one element per piece.

## Notes for AI

- Choose it for check-in, redeeming a pass, or any one-time confirmation that should feel final.
- Keep the stub content short: a seat, a gate, a code.
- Control torn to reset it (a New ticket button) or to tear it from a server event.

## Related

- [Hold to confirm](https://uiarc.dev/components/hold-to-confirm/markdown): Confirm a destructive action by holding, not tapping.
- [Swipe actions](https://uiarc.dev/components/swipe-actions/markdown): Reveal row actions with a swipe, or from the same actions in a menu.
- [Sticker peel](https://uiarc.dev/components/sticker-peel/markdown): Peel stickers off a surface with a real curl, move them around, and stick them back down.

## Also in playful

- [Page curl](https://uiarc.dev/components/page-curl/markdown): A small magazine you read by dragging page corners, with a real fold, lit curl, and flick to turn.
- [Orbit logos](https://uiarc.dev/components/orbit-logos/markdown): An integrations showcase with brand logos orbiting your product mark on tilted rings. Hover or focus one to rest the orbit, draw a connection, and see what it does.
- [Prize wheel](https://uiarc.dev/components/prize-wheel/markdown): A referral or promo prize wheel you flick to spin, with real angular momentum, a flexible pointer that ticks against each peg, weighted segments set by the host, a slow suspenseful settle, and the won segment lifting into a reward card with a copyable code.

## Guidance for AI tools

Ticket tear: Pull a ticket stub and it tears along the perforation hole by hole, then drops away. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt