@stacknet/elements

Reusable UI components for building AI chat interfaces. Framework-agnostic components with no AI SDK dependencies.

Installation

pnpm add @stacknet/elements

Components

Chat Components

• ChatContainer - Main chat container with flex layout
• ChatMessages - Scrollable messages container with auto-scroll
• ChatScrollButton - Floating scroll-to-bottom button
• ChatInputArea - Container for the chat input area
• ChatEmptyState - Empty state when no messages

Prompt Input

• PromptInput - Form wrapper for input
• PromptInputTextarea - Auto-resizing textarea with IME support
• PromptInputToolbar - Toolbar container
• PromptInputTools - Tool buttons group
• PromptInputButton - Action button
• PromptInputSubmit - Submit button with status icons
• PromptInputModelSelect - Model selector dropdown

Message Components

• MessageContainer - Message wrapper with role-based alignment
• MessageContent - Content box with role-based styling
• MessageAvatar - Avatar component
• MessageText - Prose-styled text wrapper
• MessageGroup - Groups multiple messages
• MessageTimestamp - Timestamp display

Chain of Thought

• ChainOfThought - Collapsible container
• ChainOfThoughtHeader - Toggle header
• ChainOfThoughtContent - Animated content
• ChainOfThoughtStep - Step with status icon
• ChainOfThoughtSearchResults - Results container
• ChainOfThoughtSearchResult - Individual result

Thinking/Loading

• Shimmer - Gradient text animation
• StacknetThinking - Animated fibonacci spiral dots

Media

• ImageCard - Image display for generated images
• ImageGrid - Grid layout for multiple images
• MusicPlayer - Audio player with waveform

UI Primitives

• Button - Button with variants
• Textarea - Text input
• Select - Dropdown select
• Collapsible - Collapsible container
• Avatar - User avatar

Hooks

• useScrollToBottom - Scroll management for chat

Types

The package provides its own types that replace ai-sdk dependencies:

• ChatStatus - 'idle' | 'submitted' | 'streaming' | 'error'
• Message - Base message interface
• ChatHelpers - Chat state and methods
• ToolInvocation - Tool call data
• GeneratedImage - Image generation result
• LanguageModelUsage - Token usage stats

Usage

import {
  ChatContainer,
  ChatMessages,
  ChatInputArea,
  PromptInput,
  PromptInputTextarea,
  PromptInputSubmit,
  MessageContainer,
  MessageContent,
  useScrollToBottom,
  type ChatStatus,
} from '@stacknet/elements';

function Chat() {
  const [status, setStatus] = useState<ChatStatus>('idle');
  const { containerRef, isAtBottom, scrollToBottom } = useScrollToBottom();

  return (
    <ChatContainer>
      <ChatMessages status={status}>
        {messages.map((msg) => (
          <MessageContainer key={msg.id} role={msg.role}>
            <MessageContent role={msg.role}>
              {msg.content}
            </MessageContent>
          </MessageContainer>
        ))}
      </ChatMessages>

      <ChatInputArea>
        <PromptInput onSubmit={handleSubmit}>
          <PromptInputTextarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <PromptInputSubmit status={status} />
        </PromptInput>
      </ChatInputArea>
    </ChatContainer>
  );
}

Tailwind CSS

This package uses Tailwind CSS classes. Make sure to include the package in your Tailwind content configuration:

// tailwind.config.js
module.exports = {
  content: [
    // ...
    './node_modules/@stacknet/elements/dist/**/*.js',
  ],
};

License

MIT