## Search Snippet Preview (S—444)

Write a page title, description and slug and see how the search result will look, with width-based truncation.

- URL: https://sundaeui.dev/components/seo-snippet
- 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/seo-snippet.json`
- Tags: seo, preview, search, meta-description, title-tag, marketing

Truncation follows estimated pixel width rather than character count, since a title of wide letters cuts off sooner. Meters show how much room is left.
Desktop and mobile previews use different limits, and the slug field tidies itself into a readable path.

### Usage

```tsx
import { SeoSnippet } from '@/components/sundae/seo-snippet'

<SeoSnippet />
```

### Props

- `domain` (`string`, default `'sundae.design'`): Site shown in the breadcrumb.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- CMS editors, blog publishing flows, marketing site settings.

### When not to use

- Guaranteeing what search engines display: they may rewrite it.

### Accessibility

- Each field has a counter read alongside it.
- The preview is plain text so screen readers get the truncated result.
- Reduced motion removes the movement and keeps every state change.