Installation

Add Chords to your assistant-ui project.

Prerequisites

Chords requires:

@assistant-ui/react >= 0.12.3
react >= 18
Tailwind CSS v4 (for default styling)

Install

npm install @assistant-ui/chords

Tailwind Setup

Chords ships with default Tailwind classes. For Tailwind to detect these classes, add a @source directive to your CSS file pointing at the package's dist directory:

app/globals.css

@import "tailwindcss";
@source "../node_modules/@assistant-ui/chords/dist";

The @source path is relative to the CSS file. Adjust based on your project structure.

Import

import {
  ComposerActionStatus,
  CopyButton,
  MessageActionBar,
  SuggestionChips,
  ThreadEmpty,
  ScrollToBottom,
} from "@assistant-ui/chords";

Styling

Every component ships with sensible default Tailwind classes that support both light and dark themes. You can override any class via className props:

<MessageActionBar
  className="flex gap-2 bg-gray-100"
  buttonClassName="rounded-full p-1"
  actions={["copy", "reload"]}
/>

When you pass a className prop, it replaces the default — it does not merge. This gives you full control without fighting specificity.