Built with VivekUI
This entire website is built with VivekUI, a free React component library with zero runtime dependencies.
No Tailwind, no shadcn, no MUI, no chat SDK and no charting library. Every element on every page — the navbar, the live hero conversation, the working chat app, the pricing table, the charts — comes from @the_viveksingh/vivek-ui. That is 43 distinct components across 15 sections, from one install.
npm i @the_viveksingh/vivek-uiThe chat thread, typing indicator, code blocks and the in-chat charts all come from one zero-dependency package.
Most libraries make you bolt a chart package onto a chat package onto a code highlighter. Here a BarChart is simply another child of a ChatMessage, because a message’s content is a React node rather than a markdown string.
Section by section
Every component name links to its own documentation page.
| Section | Components | Notes |
|---|---|---|
| Root layout | ThemeProviderToastProvider | Dark by default, with a pre-paint script so the first frame is never the wrong theme. |
| Site header | NavbarBadgeButtonThemeToggle | Collapses to a mobile sheet on its own; the theme toggle writes one attribute on <html>. |
| Hero — the live demo | HeroChatThreadChatMessageTypingIndicatorChatCodeBlockAvatar | Not a screenshot. The same components the chat app uses, driven by a scripted loop. |
| Feature grid | FeatureGridSection | Auto-fitting grid that responds to its own width rather than the viewport. |
| How it works | StepperChatCodeBlockCopyButton | The code block under the stepper is the real source of the hero demo. |
| By the numbers | LineChartProgressRingAnimatedCounterDivider | Pure SVG, server-rendered, with a hidden data table behind every chart. |
| Pricing | PricingButtonBadge | Two plans, both free — the second one is there to show the layout. |
| Testimonials | TestimonialsAvatar | Avatars fall back to initials when the image fails to load. |
| FAQ | FAQAccordion | The same four answers are emitted as FAQPage JSON-LD, from one array. |
| Closing call to action | CTAButton | The primary variant re-points the palette for the whole block. |
| Footer, every page | FooterCodeCopyButton | Install command with a copy button whose success is announced once. |
| Chat app — shell | SidebarInputButtonRelativeTimeEmptyStateContainer | Conversation rows are Sidebar.Item rendered asChild over real buttons. |
| Chat app — transcript | ChatThreadChatMessageTypingIndicatorChatCodeBlockBarChart | The BarChart renders inside a ChatMessage bubble. Type “show me a chart”. |
| Chat app — composer | ChatInputIconButtonTooltipToastKbd | Enter sends, Shift+Enter adds a newline, and IME composition never submits. |
| This page | TableBreadcrumbHeadingTextStackSection | Every component name in the table deep-links to its own docs page. |
Use this as your starting point
MIT licensed. Clone it, rename it, delete the sections you do not want, and point onSubmit at your own endpoint.
Public, MIT licensed, and yours to rename. No build step to configure and no environment variables to set.
git clone https://github.com/intellectwithvivek/chatterbox.gitTemplate repository: intellectwithvivek/chatterbox · Library: @the_viveksingh/vivek-ui on npm · Author: Vivek Kumar Singh
Prefer to browse the running components instead? Open the chat demo.