shadcn-chatbot-kit

shadcn-chatbot-kit

πŸ€– Beautifully designed chatbot components based on shadcn/ui

Stars: 200

Visit
 screenshot

A comprehensive chatbot component kit built on top of and fully compatible with the shadcn/ui ecosystem. Build beautiful, customizable AI chatbots in minutes while maintaining full control over your components. The kit includes pre-built chat components, auto-scroll message area, message input with auto-resize textarea and file upload support, prompt suggestions, message actions, loading states, and more. Fully themeable, highly customizable, and responsive design. Built with modern web standards and best practices. Installation instructions available with detailed documentation. Customizable using CSS variables.

README:

shadcn-chatbot-kit

A comprehensive chatbot component kit built on top of and fully compatible with the shadcn/ui ecosystem. Build beautiful, customizable AI chatbots in minutes while maintaining full control over your components.

hero

MIT License shadcn/ui

✨ Features

  • 🎨 Fully Themeable: Leverages shadcn/ui's theming system for complete visual customization
  • πŸ“¦ Copy & Paste Components: Install only what you need, own your components
  • πŸ”§ Highly Customizable: Modify any aspect of the components to match your needs
  • πŸ“± Responsive Design: Works seamlessly across all device sizes
  • πŸš€ Modern Code: Built with the latest web standards and best practices

🧩 Components

The kit includes everything you need to build a full-featured chatbot:

  • Chat: Pre-built chat component, with option to build a custom one with composable components
  • Auto-Scroll Message Area: Smart scrolling behavior for new messages
  • Message Input:
    • Auto-resize textarea
    • File upload support
    • Preview attached files
  • Prompt Suggestions: Help users with quick action buttons
  • Message Actions: Built-in copy, rate response, and other utility buttons
  • Loading States: Elegant loading indicators and transitions

πŸ“¦ Installation

  1. First, follow the installation instructions for shadcn/ui in your project.

  2. Make sure you're using the modern shadcn CLI (not the legacy shadcn-ui).

  3. Install components using the CLI.

Visit the documentation for detailed installation instructions and a full list of available components.

πŸš€ Quick Start

Note: This example uses the Vercel AI SDK. Follow the official Getting Started guide, before using it.

"use client"

import { useChat } from "ai/react"

import { Chat } from "@/components/ui/chat"

export function ChatDemo() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, stop } =
    useChat()

  return (
    <Chat
      messages={messages}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isGenerating={isLoading}
      stop={stop}
    />
  )
}

🎨 Customization

All components are built using shadcn/ui's styling system, making them fully customizable using CSS variables. Visit our theme customizer to visually design your chatbot's appearance.

🀝 Contributing

Contributions are always welcome! Feel free to:

  • Submit bug reports and feature requests
  • Open pull requests to improve the codebase
  • Share feedback and suggestions

πŸ‘¨β€βš–οΈ License

Licensed under the MIT license.

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for shadcn-chatbot-kit

Similar Open Source Tools

For similar tasks

For similar jobs