AI chat components for shadcn/ui

T3 · AI parts

Conversation

Suggestion

Conversation starters and follow-ups in a scrollable row.

Pick a starter; the row scrolls sideways on narrow screens.

pnpm exec shadcn add @intelligo/ai-suggestion

Prompt input

The chat composer: autosizing textarea that sends on Enter, attachments by picker, drop and paste, an action menu, selects, and a submit that stops a streaming reply.

Enter sends, Shift+Enter adds a line. Paste or drop a file to attach it.

pnpm exec shadcn add @intelligo/ai-prompt-input

Branch

A pager over the versions of a reply or an edited message — previous, next, `2 / 3`.

Write a short reply about the corrected invoice.

Good news: the invoice error is resolved. We have credited $40 to your account, visible under Billing.

3 / 3

pnpm exec shadcn add @intelligo/ai-branch

Speech input

Voice into the composer on the browser's speech recognition; renders nothing where it is absent.

Press the microphone and start speaking…

Uses the browser's own speech recognition; the button is omitted where it is unavailable.

pnpm exec shadcn add @intelligo/ai-speech-input

Message bubble

The speech bubble inside a message row: six surface variants that pop into place, grouped bubbles and a collapsible long body.

Draft the weekly update.

Keep it under five bullet points.

Onboarding flow shipped to all workspaces.
Support backlog down 18% week over week.
Two enterprise trials converted to paid plans.
Usage reports now export to CSV.
Next week: invoice reminders and audit filters.

The previous draft could not be saved.

pnpm exec shadcn add @intelligo/ai-message-bubble

Message scroller

The scrolling transcript: follows streamed output while the reader stays at the live edge, lets go when they scroll up, with an optional preview rail for jumping between messages.

Summarise the open support tickets.

There are 42 open tickets. Most concern billing questions and exports.

Which ones are older than a week?

Nine tickets are older than seven days; four are waiting on a customer reply.

Group those nine by team.

Billing has five, Integrations has three and Onboarding has one.

Who owns the Integrations ones?

All three are assigned to the platform team; two have a draft reply ready.

Scroll up to let go of the live edge; hover the rail to preview a turn.

pnpm exec shadcn add @intelligo/ai-message-scroller

Message

One turn of a conversation: the row with its side, optional avatar, content column, header, footer, a centred marker and the typing indicator.

Today, 9:41

You

Which accounts renewed last month?

Assistant

Twelve accounts renewed in August, three of them on an annual plan for the first time.

Answered in 2.4s

pnpm exec shadcn add @intelligo/ai-message

Streaming response

An assistant reply as it streams and once it lands: content, copy, retry and feedback actions, and a sources disclosure.

pnpm exec shadcn add @intelligo/ai-streaming-response

T3 · AI parts

Agent at work

Reasoning

Streamed reasoning, collapsible, with the time it took.

The request asks for a workspace-level summary, so member-private notes stay out.

Group the open tasks by owner.
Flag anything overdue by more than a week.
Keep the summary under five bullet points.

pnpm exec shadcn add @intelligo/ai-reasoning

Shimmer text

A status line that reads as alive while the agent works; a token gradient sweeps the text and the words swap with motion, honouring reduced motion.

Searching your documents…Slow sweep, fixed text

pnpm exec shadcn add @intelligo/ai-shimmer-text

Agent activity

One adaptive stream of what the agent is doing: reasoning text, plan steps, web searches with results, tool calls and structured traces, gliding while it works and folding into a summary when done.

Working through it…

pnpm exec shadcn add @intelligo/ai-agent-activity

Approval card

A decision surface: approve, reject or request changes, or step through single-choice, multiple-choice and freeform questions and submit the answers.

Publish the onboarding guide?

Input required

The agent finished the draft and wants to share it with every workspace member.

pnpm exec shadcn add @intelligo/ai-approval-card

File diff

A file the agent is changing: the path with live added and removed counts, opening onto a unified diff whose highlighted rows arrive while the change streams.

pnpm exec shadcn add @intelligo/ai-file-diff

Todo list

The agent's to-do list: a collapsible plan whose status marks morph between pending, in progress, completed and cancelled, with a rolling completion count.

Pending: Collect last month's usage exports
Pending: Group spend by workspace
Pending: Flag workspaces over their plan
Pending: Draft the billing summary

pnpm exec shadcn add @intelligo/ai-todo-list

Tool approval

A permission card for a tool call: name, parameters behind a disclosure, allow once / always allow / deny, and the outcome as a status.

Invite 3 people to the workspace?

workspace.members.invite

Role: member
Emails: ["ana@example.com", "li@example.com", "sam@example.com"]

pnpm exec shadcn add @intelligo/ai-tool-approval

Tool result

The result of a tool the agent ran: a summary line that opens onto highlighted output, status rolling from running to done, copy and run-again actions.

$ export --workspace acme --format csv

Running

pnpm exec shadcn add @intelligo/ai-tool-result

Agent progress

A long-running step: a pulsing grid beside the verb and an elapsed-time counter.

Indexing documentsSummarizing the threadPaused

pnpm exec shadcn add @intelligo/ai-agent-progress

Reasoning text

What the agent is doing while it reasons: phrases cycle with a cascade, swap or scramble behind an ASCII loader.

cascade

swap

scramble

pnpm exec shadcn add @intelligo/ai-reasoning-text

T3 · AI parts

What it produces

Code block

Highlighted code that streams without layout shift: header with filename, language, status and copy action, line numbers, focused lines, light and dark.

app/api/chat/route.tstypescriptReady

1import { createChatHandler } from "@intelligo-dev/chat";23import { chatServerConfig } from "@/lib/chat-server";45export const { POST, DELETE } = createChatHandler(chatServerConfig);6

pnpm exec shadcn add @intelligo/ai-code-block

Markdown

Markdown as a model writes it — GFM, highlighted code, CJK emphasis — with maths and diagrams fetched only when the text contains them.

Refund policy

Refunds are prorated to the day. A workspace on the yearly plan that cancels in month four gets eight months back.

Plan	Window
Monthly	14 days
Yearly	30 days

pnpm exec shadcn add @intelligo/ai-markdown

Artifact

A generated document's frame: header, actions and content.

Weekly summary

Updated 2 minutes ago

Highlights

128 conversations resolved, 14 escalated to a teammate.
Two new members joined the workspace.
Credit usage is at 62% of this month's allowance.

pnpm exec shadcn add @intelligo/ai-artifact

The motion vocabulary every tier shares: easing curves, spring presets, a transform-only disclosure, a text swap, the popup and backdrop presets the primitives open with, the button press and list staggers, all gated on reduced motion.

SPRING_PRESS

SPRING_LAYOUT

EASE_OUT

The request mentions last week, so the summary reads the seven most recent days of activity before drafting.

pnpm exec shadcn add @intelligo/ai-motion

Citations

The sources an answer leans on: inline source pills with a hover preview, favicon stacks, a sources sheet and a collapsible reference list.

Response times improved sharply this quarterQ3 support review+1, and most new members now finish setup on day one2. Shared inboxes are next on the roadmap3.

Q3 support review1

Onboarding survey2

Roadmap notes3

pnpm exec shadcn add @intelligo/ai-citations

Image generation

An image the agent is making: reserved frame, dither field while queued and generating, media sharpening in as it refines and completes.

1024 × 1024

Waiting to generate

“Soft abstract shapes for a workspace cover”

pnpm exec shadcn add @intelligo/ai-image-generation

Sidebar

The AI product's sidebar: a shell that morphs between a panel and an icon rail with tooltips, slides in as a sheet on mobile, holds menus with a gliding hover and active pill and staggered submenus, and a resource tree of folders, projects, conversations, files and bookmarks with keyboard and drag-and-drop moves, rename and a row menu.

pnpm exec shadcn add @intelligo/ai-sidebar

T4 · Intelligo patterns

Patterns

Page furniture every block repeats and no tier above covers: page header, stat card, status badge, copy button, document viewer.

Stat card

A metric on a card — label, value, an action such as a status badge, and a footer.

Conversations

1,284

+12%

Last 30 days

Credits used

8,420

82%

Of 10,000 this month

Spend

$46.10

Within limit

Resets on the 1st

pnpm exec shadcn add @intelligo/stat-card

Status badge

A status shown in a status token — neutral, info, success, warning or destructive — never a palette colour.

DraftQueuedActivePast dueFailed

RunningCompletedTrial ends in 3 daysPayment failed

pnpm exec shadcn add @intelligo/status-badge

Copy button

Copy to the clipboard with confirmation and a live announcement; labels are passed in, so it carries no copy of its own.

ws_7f3a9c2e41b8

pnpm exec shadcn add @intelligo/copy-button

Document viewer

How a saved document reads when nobody is editing it: markdown with maths and diagrams, highlighted code, a sheet's rows, an image, and a sandboxed HTML preview — plus the title-to-language and kind-glyph helpers the chat canvas and the artifacts library share.

Release notes

The assistant now cites its sources inline, and long answers stream without the layout jumping.

Shared inboxes for every workspace
Faster document search
Usage exports as CSV

pnpm exec shadcn add @intelligo/document-viewer

T4 · Intelligo patterns

Motion

Interaction patterns on the shared motion vocabulary: morphing popups, stacks, lists, uploads and hold-to-confirm.

Select morph

A select whose trigger continues into its list: the list unclips down from the trigger's edge as one surface while its options stagger in.

Plan

pnpm exec shadcn add @intelligo/select-morph

Notification stack

Notifications fanned into a stack — the newest in front, the rest peeking out scaled back — that springs apart into a list of openable, dismissable cards on hover or click.

Lee joined the workspace2mAccepted your invitation as a Member.Unread
Invoice paid1hINV-2041 for $240.00 was charged to Visa ··4242.Unread
Credits running low3h12% of this month's credits remain.
Weekly digest ready1d142 runs, 3 new members, 1 failed export.

pnpm exec shadcn add @intelligo/notification-stack

Animated list

A list container that staggers its rows in on mount, rows that rise in, fall out and glide on reorder (ul, ol, div or tbody/tr), and a block that reveals once as it scrolls into view.

SSara KimAdmin
LLee ParkMember
OOmar HaddadMember

pnpm exec shadcn add @intelligo/animated-list

OTP input

A one-time-code input on Base UI's OTP Field whose characters roll into their slots under a blinking caret, shaking on a rejected code and drawing a check on an accepted one.

Verification code

Enter the code we emailed you (try 424242).

pnpm exec shadcn add @intelligo/otp-input

File upload

A controlled file upload — a drop zone with a queue of rows that slide in, fill a progress bar and settle on done or error, or a compact chat-composer wrapper with a drop overlay and chips.

q3-invoices.csv
180 KB
Uploaded
member-handbook.pdf
2.3 MB
Uploading

pnpm exec shadcn add @intelligo/file-upload

Expandable tabs

A bar of icon tabs on Base UI's Tabs where the active tab widens to unfurl its label, the pill glides to it and its panel rises in.

pnpm exec shadcn add @intelligo/expandable-tabs

Hold action button

A press-and-hold confirmation for a destructive action, by pointer or held Space/Enter, whose fill sweeps across while held and drains on an early release.

Press and hold.

pnpm exec shadcn add @intelligo/hold-action-button

T1 · Primitives

Primitives

The interactive building blocks, on Base UI with shadcn's API kept. Blocks name them bare in registryDependencies.

Alert

An inline callout for a status, a warning or an error.

Invitation sent

Maria will get an email with a link to join.

Out of credits

Buy a credit bundle or upgrade to keep running agents.

pnpm exec shadcn add alert

Alert dialog

A modal that confirms a destructive or irreversible action, with the dialog's backdrop and spring.

pnpm exec shadcn add @intelligo/alert-dialog

Avatar

A user or workspace picture with fallback, badge and group.

size

MCMCLW

group

MCLWSO

+4

pnpm exec shadcn add avatar

Badge

A small label for roles, statuses and counts.

variant

OwnerMemberPendingPast dueGhostLink

pnpm exec shadcn add badge

Button

The action primitive: presses in and settles back — six variants, eight sizes, composes through render.

variant

size

icon

render

A link that looks like a button

pnpm exec shadcn add @intelligo/button

Card

A surface with header, action, content and footer slots.

Pro plan

Renews on October 1, 2026.

Active

Credits used1,226 / 5,000

x

pnpm exec shadcn add card

Dialog

A modal window over a blurred backdrop that springs up into place.

pnpm exec shadcn add @intelligo/dialog

Input

A single-line text field whose border and soft ring ease in on focus.

pnpm exec shadcn add @intelligo/input

Label

An accessible label bound to a form control.

pnpm exec shadcn add label

Progress

A rounded bar whose fill glides to each new value.

Credits24%

x

Seats60%

x

Storage92%

x

pnpm exec shadcn add @intelligo/progress

Scroll area

A scroll container with a styled scrollbar.

Conversations

Contract review #16

Contract review #15

Contract review #14

Contract review #13

Contract review #12

Contract review #11

Contract review #10

Contract review #9

Contract review #8

Contract review #7

Contract review #6

Contract review #5

Contract review #4

Contract review #3

Contract review #2

Contract review #1

pnpm exec shadcn add scroll-area

Select

A picker for one value from a list, on the input's field and the menu's panel.

pnpm exec shadcn add @intelligo/select

Separator

A horizontal or vertical rule.

Acme Legal

Pro plan · 3 members

Team

Billing

Usage

pnpm exec shadcn add separator

Sheet

A panel that slides in from any edge on the drawer curve.

pnpm exec shadcn add @intelligo/sheet

Skeleton

A loading placeholder in the shape of the content.

pnpm exec shadcn add skeleton

Sonner

Toasts. The one notification seam every block reports through.

pnpm exec shadcn add sonner

Table

Rows and columns for members, invitations and executions.

Members of Acme Legal.
Name	Email	Role
Maria Chen	maria@acme.co	owner
Li Wei	li@acme.co	admin
Sam Okafor	sam@acme.co	member

pnpm exec shadcn add table

Tabs

Switches between views with one indicator that glides from tab to tab — raised and line variants.

variant="default" · profile settings

variant="line" · profile settings

pnpm exec shadcn add @intelligo/tabs

Textarea

A multi-line text field that grows with its content.

pnpm exec shadcn add @intelligo/textarea

Checkbox

A checkbox whose check draws itself in, with an indeterminate state.

Email me when an invoice is paidSend a weekly usage digestSome members selectedExport audit log (Enterprise)

pnpm exec shadcn add @intelligo/checkbox

Radio group

One choice from a set; the dot springs out from the centre.

AdminManages members and billingMemberUses the workspaceViewerReads, never edits

pnpm exec shadcn add @intelligo/radio-group

Switch

An on/off control with a weighted thumb that squeezes while pressed.

Auto top-up creditsLow-balance alerts

pnpm exec shadcn add @intelligo/switch

Collapsible

Content that eases open and closed from its measured height.

3 pending invitations

sara@example.com

pnpm exec shadcn add @intelligo/collapsible

Command

A searchable list of actions, inline or in a dialog.

pnpm exec shadcn add @intelligo/command

T2 · Composites

Composites

Official shadcn compositions: forms, empty states, items, input groups, and the conversation surface.

Field

Label, control, description and error as one accessible unit. Every form is Field.

pnpm exec shadcn add field

Empty

The empty state: media, title, description and an action.

No artifacts yet

Documents your agent writes in chat show up here.

pnpm exec shadcn add empty

Item

A row of media, content and actions — lists, settings rows, search results.

Indemnity summary

Generated in “Contract review #16” · 2 hours ago

Two-factor authentication

Required for owners and admins.

On

pnpm exec shadcn add item

Input group

An input or textarea with inline addons, buttons and text.

⌘K

pnpm exec shadcn add @intelligo/input-group

Button group

Related buttons joined into one control.

pnpm exec shadcn add button-group

Spinner

Pending state: a faint ring with a running arc. Pair with disabled and aria-busy.

pnpm exec shadcn add @intelligo/spinner

Kbd

A keyboard key or shortcut.

New chat⌘KSend EnterNew lineShiftEnter

pnpm exec shadcn add kbd

Message scroller

The conversation viewport: sticks to the newest message while it streams.

Today

Summarise the indemnity clauses in the Acme MSA.

Contract Copilot

There are three: a mutual IP indemnity (§9.1), a data-breach indemnity capped at 12 months of fees (§9.3), and a carve-out for gross negligence (§9.4).

14 credits

Is the data-breach cap market standard?

Contract Copilot

For a mid-market SaaS contract, 12 months is on the low side; 24 months or a separate super-cap for data incidents is more common.

14 credits

Thinking…

pnpm exec shadcn add message-scroller

Message

One turn in a conversation — avatar, header, content, footer.

Draft a reply accepting the 24-month cap.

Contract Copilot

Here is a reply you can send to Acme's counsel.

claude-sonnet-5 · 22 credits

pnpm exec shadcn add message

Bubble

The body of a message, aligned to its author.

variant="default"

variant="secondary"

variant="muted"

variant="outline"

variant="ghost"

pnpm exec shadcn add bubble

Attachment

A file attached to a message or a prompt.

acme-msa.pdf2.4 MB

redlines.docxUploading…

pnpm exec shadcn add @intelligo/attachment

Marker

A divider or status line inside a conversation.

Yesterday

Reading acme-msa.pdf…

Saved as an artifact

pnpm exec shadcn add marker

Foundation · tokens

The token contract

shadcn's official set, plus status, layer and motion tokens Intelligo adds and never renames. Read from intelligo.dev/r/intelligo.json.

Surface

--background

--foreground

--card

--card-foreground

--popover

--popover-foreground

Intent

--primary

--primary-foreground

--secondary

--secondary-foreground

--muted

--muted-foreground

--accent

--accent-foreground

Edge

--border

--input

--ring

Chart

--chart-1

--chart-2

--chart-3

--chart-4

--chart-5

Sidebar

--sidebar

--sidebar-foreground

--sidebar-primary

--sidebar-primary-foreground

--sidebar-accent

--sidebar-accent-foreground

--sidebar-border

--sidebar-ring

Status · text on the page, and a fill under its foreground

Aa destructive

--destructive-foreground

Aa success

--success-foreground

Aa warning

--warning-foreground

Aa info

--info-foreground

Radius · --radius: 0.5rem

sm · 4.8px

small insets

md · 6.4px

menu rows, nested

lg · 8px

controls, popups

xl · 11.2px

cards, dialogs

full

chips, dots

Type

--font-sans · Geist

Workspaces, credits and every page around your agent.

--font-mono · Geist Mono

pnpm exec shadcn add @intelligo/chat

--font-heading · Outfit · site only

Everything your AI product needs.

Layers · z-* utilities

z-sticky10

z-dropdown20

z-overlay40

z-modal50

z-popover60

z-toast70

Motion · hover a row · collapsed under reduced motion

duration-fast · 120ms

duration-normal · 200ms

duration-slow · 320ms

--ease-standard: cubic-bezier(0.16, 1, 0.3, 1)

--ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1)

--ease-exit: cubic-bezier(0.77, 0, 0.175, 1)

Contrast · WCAG 2.2 AA, checked in CI

Text	On	Needs	Light	Dark
--foreground	--background	4.5:1	19.12	16.25
--muted-foreground	--background	4.5:1	5.83	6.33
--muted-foreground	--muted	4.5:1	5.50	5.91
--primary-foreground	--primary	4.5:1	19.12	16.25
--destructive	--background	4.5:1	5.94	6.30
--destructive-foreground	--destructive	4.5:1	5.94	6.30
--success	--background	4.5:1	5.74	7.87
--success-foreground	--success	4.5:1	5.74	7.87
--warning	--background	4.5:1	5.94	8.93
--warning-foreground	--warning	4.5:1	5.94	8.93
--info	--background	4.5:1	5.74	7.44
--info-foreground	--info	4.5:1	5.74	7.44
--ring	--background	3:1	4.72	4.26

Publish the onboarding guide?Publish the onboarding guide?

Monthly billing review

Refund policy

Release notes

Alert

Avatar

Badge

Card

Label

Scroll area

Separator

Skeleton

Sonner

Table

Field

Empty

Item

Button group

Kbd

Message scroller

Message

Bubble

Marker

Publish the onboarding guide?