PaceUI

  • Components
  • Blocks
  • Templates
  • Studio
  • Resources
Native AI
  • Introduction
Components
  • Browser Support
  • Response Renderer
  • Chat Header
  • Chat Messages
  • Chat Suggestions
  • Chat Input
Use Cases
  • Quick Chat
  • Follow Ups
Hooks
  • useBrowserSupport
  • useNativeAI
  1. Components
  2. Native AI
PreviousNext

Chat Input

Native AI chat input with loading and submit states in React.

Overview

The ChatInput component provides a standard chat text box with a send button. It handles pressing Enter to submit the message and disables state automatically during loading or when AI support is missing.

default.tsx

API Reference

Props

PropTypeDescriptionDefault
valuestringThe current text value of the input.(Required)
onChange(val: string) => voidCallback function fired when the text changes.(Required)
onSubmit() => voidCallback function fired when the form is submitted (button click or Enter).(Required)
isLoadingbooleanIf true, disables input and swaps the send icon for a loading spinner.false
isSupportedbooleanIf false, disables the input, indicating that AI is not supported/active.false
placeholderstringPlaceholder text for the input box."Type your message..."
Chat SuggestionsQuick Chat

PaceUI

Animated blocks, components, and templates for Next.js and TanStack Start. Built with Motion and shadcn - clean code you own.

GitHubTwitterDiscord

Products

BlocksComponentsTemplatesCraftsTanStack ChartsMCP ServerStarter KitsStyleX Components

Resources

DocumentationMotion ComponentsGSAP AnimationsNative AIBlogChangelog

Pricing & Account

PricingManage AccountLicensesAPI KeysAffiliate Program

Company

Contact UsDiscord CommunityPrivacy PolicyTerms of Service

© 2026 PaceUI. All rights reserved. Built by indie developer, Denish

PACEUI

Type a message and press Send.