design-infraReport a problem or share feedback← Catalog
Chat thread
curatedtheme-awarefreeoc/chat-thread
AI conversation view: user bubbles, assistant turns with markdown-ish text + code blocks, tool-call chips, copy/vote/regenerate actions, @oc/agent-status while pending. Auto-sticks to bottom.
$
npx shadcn@latest add @design-infra/chat-threadnpm deps: lucide-react
Live demo — under each design system
brutalist-mono
Which of our landing pages has the worst conversion this month?
analytics.query· sessions → signups · 30dpages.list· 14 pages
/pricing converts worst at 1.8% (site average 4.1%). Two likely causes:
- The plan table hides the free tier below the fold on mobile.
- 38% of visitors open the FAQ, but the
Enterprisequestion has no answer.
sql
select page, signups::float / sessions as cvr
from page_stats order by cvr asc limit 3;Draft a fix for the mobile plan table.
Writing…pricing-table.tsx
editorial
Which of our landing pages has the worst conversion this month?
analytics.query· sessions → signups · 30dpages.list· 14 pages
/pricing converts worst at 1.8% (site average 4.1%). Two likely causes:
- The plan table hides the free tier below the fold on mobile.
- 38% of visitors open the FAQ, but the
Enterprisequestion has no answer.
sql
select page, signups::float / sessions as cvr
from page_stats order by cvr asc limit 3;Draft a fix for the mobile plan table.
Writing…pricing-table.tsx
linear-dark
Which of our landing pages has the worst conversion this month?
analytics.query· sessions → signups · 30dpages.list· 14 pages
/pricing converts worst at 1.8% (site average 4.1%). Two likely causes:
- The plan table hides the free tier below the fold on mobile.
- 38% of visitors open the FAQ, but the
Enterprisequestion has no answer.
sql
select page, signups::float / sessions as cvr
from page_stats order by cvr asc limit 3;Draft a fix for the mobile plan table.
Writing…pricing-table.tsx
soft-glass
Which of our landing pages has the worst conversion this month?
analytics.query· sessions → signups · 30dpages.list· 14 pages
/pricing converts worst at 1.8% (site average 4.1%). Two likely causes:
- The plan table hides the free tier below the fold on mobile.
- 38% of visitors open the FAQ, but the
Enterprisequestion has no answer.
sql
select page, signups::float / sessions as cvr
from page_stats order by cvr asc limit 3;Draft a fix for the mobile plan table.
Writing…pricing-table.tsx
- Source
- oc
- Kind
- block
- Categories
- ai-chat, agent-ui
- Use as
- drop-in — replaces your component
- Applies to
- ai-chatagent-ui
- Motion
- on state · subtle · css · low cost · ignores reduced motion
- Tags
- oc
- Live demo
- www.owencoonahan.xyz
Similar
Compare all 4 →- Ai Reasoningsmoothui/ai-reasoningCollapsible reasoning trace: the label shimmers 'Thinking' only while isStreaming, then settles to 'Thought for 3.2s' (measured, or pass duration) and auto-collapses — until the user toggles it, after which it stops deciding for them. Muted-foreground chrome, inherits the theme; no shimmer under reduced motion.
- Template · AI chatoc/template-ai-chatStarter page → app/chat/page.tsx. Use existing compatible tokens, or install a theme only when requested; it pulls in 4 @oc blocks. Preview: /templates/template-ai-chat.
- Chat Appbeui/chat-appA complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and prompt input.