Docs

React UI

Styling recipe

Application-owned CSS and Tailwind CSS for a practical @anvia/react-ui chat surface.

The optional package stylesheet handles functional defaults. This recipe shows the layout and visual styling that should live in the app.

import { ChatProvider, Composer, Message, Thread } from "@anvia/react-ui";
import { useChat } from "@anvia/react";
import "@anvia/react-ui/styles.css";

export function StyledChat() {
  const chat = useChat({ endpoint: "http://localhost:8787/api/chat" });

  return (
    <ChatProvider controller={chat}>
      <Thread.Root className="chat">
        <Thread.Viewport className="chat-scroll">
          <Thread.Empty className="empty-state">Start a conversation.</Thread.Empty>
          <Thread.Messages className="messages">
            {(message) => (
              <Message.Root className="message">
                <Message.Content className="message-content">
                  <Message.Parts />
                </Message.Content>
                {message.role === "assistant" ? (
                  <Message.Actions className="message-actions">
                    <Message.Copy>Copy</Message.Copy>
                    <Message.Regenerate>Retry</Message.Regenerate>
                  </Message.Actions>
                ) : null}
              </Message.Root>
            )}
          </Thread.Messages>
          <Thread.ScrollToBottom className="scroll-button">Latest</Thread.ScrollToBottom>
        </Thread.Viewport>

        <Composer.Root className="composer">
          <Composer.Attachments className="attachment-list" />
          <Composer.AddAttachment className="composer-button">Attach</Composer.AddAttachment>
          <Composer.Input className="composer-input" placeholder="Ask..." maxRows={6} />
          <Composer.Stop className="composer-button">Stop</Composer.Stop>
          <Composer.Submit className="composer-button composer-submit">Send</Composer.Submit>
        </Composer.Root>
      </Thread.Root>
    </ChatProvider>
  );
}

State selectors

Use data-state, data-role, and data-anvia-* selectors for state-specific styling.

[data-anvia-composer][data-state="streaming"] [data-anvia-submit] {
  display: none;
}

[data-anvia-scroll-to-bottom][data-state="bottom"] {
  visibility: hidden;
}

[data-anvia-tool][data-state="error"] {
  border-color: #fb7185;
}

Keep the package stylesheet imported for behavior, then put product layout and visual rules in your app CSS or Tailwind classes.

For a list of stable attributes, see Reference.