## Thread Composer (S—322)

Write a multi-post thread: each post has its own counter ring, add or remove posts, auto-numbering, and split long text.

- URL: https://sundaeui.dev/components/thread-composer
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/thread-composer.json`
- Tags: writing, thread, social, character-count, posts, composer

Posts stack along a connecting line like the published thread will. Each has a small ring that fills toward the limit and turns into a countdown in the last 20 characters.
Split breaks an over-long post at the nearest sentence or word boundary into the next post. Numbering (1/4) can be toggled.

### Usage

```tsx
import { ThreadComposer } from '@/components/sundae/thread-composer'

<ThreadComposer />
```

### Props

- `limit` (`number`, default `280`): Characters per post.
- `posts` (`string[]`): Starting posts.
- `onPost` (`(posts: string[]) => void`): Called on publish.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Social schedulers, community apps, changelog posts.

### When not to use

- Long-form articles.

### Accessibility

- Each post is a labelled textarea; remaining characters are announced near the limit.
- Add, remove and split buttons are labelled with the post number.
- Reduced motion removes the movement and keeps every state change.