Browse all components

Text Response

Clean prose styling for a standard assistant answer with inline code.

From AICSS ↗React, Vue & Svelte

Preview

AI interfaces work best when every state is clear and easy to act on.

Install

Choose your framework below and copy the source into your project. For React, place the component and its CSS Module in the same folder, then import the component where you need it.

Code

Open source ↗

TextResponse.tsx

"use client";

import styles from "./TextResponse.module.css";
import type { ReactNode } from "react";

export function TextResponse({ children }: { children?: ReactNode }) {
  return <div className={styles.prose}>{children}</div>;
}

Copy both the component and its CSS Module into the same folder.

Related components

Code Block ↗

A code block with a language label and one-click copy button.

Comparison Table ↗

A feature-by-plan comparison matrix with checkmarks.

Data Table ↗

A tidy data table for structured comparisons and results.

Message Actions ↗

The action row under an assistant message: good response, bad response, copy, an emoji reaction, reply, and more.

Streaming Text ↗

Typewriter-style streaming text with a blinking caret.