Browse the docs

Components

Chatbot

An assistant that lives in a corner: an idle pill, a composer bar with a soft glow, and a conversation panel.

Install

npx shadcn@latest add @stardust/chatbot

Examples

Pill, composer and conversation

Click the pill to open the composer. Send a message to open the conversation. Escape or clicking outside an empty composer returns to the pill; Minimize does the same from the panel.

Open conversation

defaultState="open" starts with the panel showing. User messages sit in a bubble; assistant replies are plain text.

Stardust assistantUsually replies instantly

Why did churn go up this month?

Churn rose from 2.1% to 2.4%. Most of it came from three Starter accounts that cancelled in the week after the price change on November 3.

Did any of them leave feedback?

Two did. Northwind Labs said the new price was over budget, and Orbit Studio moved to an in-house tool. Helios Health didn't leave a reason.

Draft a win-back email for Northwind Labs. Keep it short and friendly. Offer the old price for 3 months.

Here's a draft: Hi Maya, we're sorry to see Northwind go. If budget was the blocker, we'd like to offer your old price for the next 3 months. Want to pick up where you left off?

Rich answers

Assistant replies have no bubble, so they can hold lists, numbers and follow-up actions.

Stardust assistantUsually replies instantly

Give me a quick summary of November.

November was your best month this year.

Revenue$48,210+12.4%

New subs142+8.1%

Churn2.4%+0.3%

Annual plans drove 60% of new revenue.
Three Starter accounts churned after the price change.
Two invoices are still overdue.

Who are the overdue invoices from? And how late is each one?

Orbit Studio ($720, 30 days late) and Helios Health ($1,850, due last Friday). I can send both a reminder.

Examples are React. The Vue components take the same props and variants; only the template syntax differs.

Usage

Mount one Chatbot per app, floating in the bottom corner (bottom-right by default).
Keep the trigger label short and specific: Ask anything, Ask about your revenue.
Show ChatbotTyping while the reply is generating, and stream text into the last message.
Give assistant replies structure when it helps: short paragraphs, lists, key numbers and one or two follow-up actions.

Don’t

Don't place it over primary actions or the toast stack; move it with side="left" if they collide.
Don't open the conversation panel on page load; let people start from the pill.
Don't use the glow anywhere else; it marks the assistant.

Accessibility

The composer input has a label, Enter sends and Shift+Enter adds a line. Messages keep those line breaks.
Escape on an empty composer collapses it back to the pill.
The message list is a polite live region, so new replies are announced.
Icon buttons (attach, select on page, voice, send, minimize) all have aria-labels.

PreviousToast NextTabs

Examples

Pill, composer and conversation

Click the pill to open the composer. Send a message to open the conversation. Escape or clicking outside an empty composer returns to the pill; Minimize does the same from the panel.

Open conversation

defaultState="open" starts with the panel showing. User messages sit in a bubble; assistant replies are plain text.

Stardust assistantUsually replies instantly

Why did churn go up this month?

Churn rose from 2.1% to 2.4%. Most of it came from three Starter accounts that cancelled in the week after the price change on November 3.

Did any of them leave feedback?

Two did. Northwind Labs said the new price was over budget, and Orbit Studio moved to an in-house tool. Helios Health didn't leave a reason.

Draft a win-back email for Northwind Labs. Keep it short and friendly. Offer the old price for 3 months.

Here's a draft: Hi Maya, we're sorry to see Northwind go. If budget was the blocker, we'd like to offer your old price for the next 3 months. Want to pick up where you left off?

Rich answers

Assistant replies have no bubble, so they can hold lists, numbers and follow-up actions.

Stardust assistantUsually replies instantly

Give me a quick summary of November.

November was your best month this year.

Revenue$48,210+12.4%

New subs142+8.1%

Churn2.4%+0.3%

Annual plans drove 60% of new revenue.
Three Starter accounts churned after the price change.
Two invoices are still overdue.

Who are the overdue invoices from? And how late is each one?

Orbit Studio ($720, 30 days late) and Helios Health ($1,850, due last Friday). I can send both a reminder.

Examples are React. The Vue components take the same props and variants; only the template syntax differs.

Usage

Mount one Chatbot per app, floating in the bottom corner (bottom-right by default).
Keep the trigger label short and specific: Ask anything, Ask about your revenue.
Show ChatbotTyping while the reply is generating, and stream text into the last message.
Give assistant replies structure when it helps: short paragraphs, lists, key numbers and one or two follow-up actions.

Don’t

Don't place it over primary actions or the toast stack; move it with side="left" if they collide.
Don't open the conversation panel on page load; let people start from the pill.
Don't use the glow anywhere else; it marks the assistant.

Accessibility

The composer input has a label, Enter sends and Shift+Enter adds a line. Messages keep those line breaks.

Escape on an empty composer collapses it back to the pill.

The message list is a polite live region, so new replies are announced.

Icon buttons (attach, select on page, voice, send, minimize) all have aria-labels.