# Support ticket

> Conversation with internal notes, macros, SLA countdown and customer context.

Block · Pro · https://lodeui.com/blocks/support-ticket

## When to use

- Help desks and customer support tools.

## When not to use

- Live chat widgets for customers.

## Installation

```bash
npx shadcn@latest add @lode/support-ticket
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SupportTicket } from "@/components/blocks/support-ticket";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <SupportTicket />
    </main>
  );
}
```

Built from: Avatar group, Badge, Button, Select

## API reference

### SupportTicket

A support ticket with conversation, internal notes, macros, a reply composer, SLA countdown and customer context. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ⌘Enter / Ctrl+Enter | Send the reply |
| Tab | Move through composer, macros and status |

## Accessibility

- Notes are labelled as internal, not only colored.
- The composer and status select are labelled.

## Motion

- New replies slide in; the SLA timer counts down.

## Responsive behavior

- Customer context moves under the thread below 1024px.

## Performance

- One interval drives the SLA countdown and is cleared on unmount.

## Notes for AI

- Keep notes and replies in one array with a type field.

## Related

- [Inbox triage](https://lodeui.com/blocks/inbox-triage) — Keyboard-first triage: j/k to move, e to archive, s to snooze, with undo.
- [Avatar group](https://lodeui.com/components/avatar-group) — Overlapping avatars that spread apart on hover.
- [Select](https://lodeui.com/components/select) — A pill trigger with a springy menu, typeahead, and full keyboard support.