Free & open source · MIT

Ship a chat UI before lunch

The chat panel beside this text is not a screenshot — it is ChatThread, ChatMessage, TypingIndicator and ChatCodeBlock running live, from a component library with zero runtime dependencies. Fork the template, point it at your model, ship.
Try the demoRead the docs
chatterbox — live components, not a screenshot
Give me the React for a chat thread with a typing indicator.
What you get

The parts of a chat UI nobody wants to build twice

Five components cover the whole surface. None of them ships a dependency, and most render on the server.

  • Streaming-shaped rendering

    A typing indicator that announces itself once instead of on every token, and auto-scroll that sticks to the bottom only while the reader is already there. Push tokens onto the last message; the thread does the rest.

  • Code blocks that copy

    Fenced blocks with a filename header, a copy button whose accessible name never changes, and horizontal scroll a keyboard user can actually reach. Bring your own highlighter through one render prop.

  • Charts inside the bubble

    Six SVG chart types at a separate subpath. Drop a BarChart into a message and it renders as part of the answer — no canvas, no d3, no second package.

  • Theming by custom property

    Every colour, radius and font is a CSS variable. The emerald on this page is four declarations. Dark mode is one attribute on <html>, and it survives JavaScript being switched off.

  • Accessible by construction

    Each turn is an <article> so screen readers can step message by message. Charts ship a hidden table of the real numbers. Nothing encodes meaning in colour alone.

  • Zero runtime dependencies

    One install, one CSS import, no config file, no CLI copying files into your repo. 27 kB gzipped for the whole library, and components render on the server without a client boundary.

How it works

Install, import, compose

There is no config file, no CLI and no code generation step. Three commands and you are rendering messages.

The hero, in full

This is the entire demo above

Twenty-odd lines, two components and your own ask(). Nothing has been elided.

components/demo.tsxtsx
'use client'
import { useState } from 'react'
import { ChatThread, ChatInput } from '@the_viveksingh/vivek-ui'

export function Demo() {
  const [messages, setMessages] = useState([])
  const [pending, setPending] = useState(false)

  async function send(text: string) {
    setMessages((m) => [...m, { id: crypto.randomUUID(), role: 'user', content: text }])
    setPending(true)
    const reply = await ask(text)               // your backend
    setPending(false)
    setMessages((m) => [...m, { id: crypto.randomUUID(), role: 'assistant', content: reply }])
  }

  return (
    <>
      <ChatThread messages={messages} loading={pending} />
      <ChatInput onSubmit={send} placeholder="Ask anything…" />
    </>
  )
}
npm i @the_viveksingh/vivek-ui
By the numbers

Charts from the same package

Both figures below are inline SVG from @the_viveksingh/vivek-ui/charts — no canvas, no d3, and a hidden data table behind each one so screen readers get the real values.

LineChart

Messages rendered per week

Twelve weeks across every template built on these components.

Messages rendered per weekWeekly message volume over twelve weeks, rising from 18.4k to 126.5k.20k40k60k80k100k120kW1W3W5W7W9W11
Messages rendered per week
WeekMessages
W118.4K
W224.9K
W331.2K
W429.7K
W542.1K
W655.8K
W761.3K
W878.6K
W992.4K
W1088.9K
W11104.2K
W12126.5K

Peak week 126,500 messages — rendered, not fetched.

ProgressRing

Render reliability

Server-safe components, so most of the tree never depends on hydration succeeding.

Weight

0 deps

27 kB gzipped of CSS for the whole library, 2 kB more for all six charts. React is the only peer.

Pricing

Free, and then free

There is nothing to buy. The second column exists so you can see what the Pricing component does with two plans.

  • Free

    This template
    $0forever

    The template, the library, and every component on this page.

    • MIT licensed — commercial use included
    • All 91 components and 6 charts
    • Landing page + working chat shell
    • Dark mode, theming, SEO and JSON-LD wired up
    • Fork it, rename it, ship it
    Try the demo

  • Pro

    $0also forever

    There is no Pro tier. This column exists so you can see what the Pricing component does with a second plan.

    • Everything in Free
    • No seat counts, no usage caps
    • No email capture before download
    • A GitHub star, if you feel like it
    Star on GitHub
Field reports

What people do with it

  • I had a working assistant UI in front of our inference endpoint in an afternoon. The bit I had budgeted three days for — code blocks, copy buttons, scroll behaviour — was already done.
    Priya Raghavan
    Priya RaghavanStaff Engineer, infra tooling
  • A chart rendering inside a chat bubble, from the same package as the chat bubble, with no charting dependency. I did not think that was on the menu.
    Tom Okafor
    Tom OkaforFounder, two-person startup
  • Our audit flagged nine components in the previous stack. This one came back clean — articles per turn, a real table behind every chart, focus you can actually see.
    Lena Fischer
    Lena FischerAccessibility lead
FAQ

Questions worth answering

Does this work with any LLM API?

Yes. ChatterBox is UI only — there is no model, no SDK and no API key anywhere in it. The components take messages in and render them, so they sit in front of whatever you already run: Anthropic, OpenAI, Mistral, or an open-weights model on your own hardware. Wire ChatInput’s onSubmit to a server action or a route handler and append tokens to the last message as they arrive.

Is it really zero-dependency?

Yes. VivekUI declares no runtime dependencies at all — only React as a peer. No Tailwind, no styled-components, no icon package, no charting library, no CLI that copies files into your repository. The whole library is 27 kB gzipped of CSS plus the components you actually import, and most of them render on the server with no client boundary.

Can charts render inside chat messages?

Yes, and it is worth seeing. Open the demo and type “show me a chart”: the assistant answers with a real SVG BarChart inside the message bubble. Because a message’s content is a React node rather than a markdown string, any component can live inside a turn — and the chart comes from the same zero-dependency package as the thread around it.

Is it free for commercial use?

Yes. Both the template and VivekUI are MIT licensed, with no attribution requirement, no seat limits and nothing to buy. The footer credit is there because it helps the project; you are free to remove it. A star on GitHub is appreciated.

Open source

Clone it and make it yours

ChatterBox is a public repository, not a paywalled starter. Nothing is stripped out of the free version, because there is no other version.

Clone the repository

Public, MIT licensed, and yours to rename. No build step to configure and no environment variables to set.

intellectwithvivek/chatterboxbash
git clone https://github.com/intellectwithvivek/chatterbox.git
View on GitHubUse this template
What you are cloning
  • 3 routes, fully server-rendered and statically prerendered
  • 39 VivekUI components, no other UI dependency
  • Dark mode, emerald theming, and a pre-paint theme script
  • Metadata, sitemap, robots, JSON-LD and llms.txt already wired
  • No API keys, no env vars, no backend to stand up

Built by Vivek Kumar Singh to show what VivekUI can do.

Start here

Fork it, point it at your model, ship it

MIT licensed. No email capture, no trial, no dashboard to sign up for.

Open the chat demo Clone the repoSee every component used