Components / AI chat
Code block and markdown
Answer styles for rendered markdown and a code block with copy and download.
@fabrials/ai-ui
Layered styles
Shared components live in the components layer. Hosts override after them.
- Import tokens once.
- Import component styles.
Color always has a text or symbol companion.
ts
type Theme = "light" | "dark";export function applyTheme(theme: Theme) { document.documentElement.classList.toggle("dark", theme === "dark"); return { theme, appliedAt: Date.now() };}| Surface | Width | Controls |
|---|---|---|
| Phone | 390 | 44px |
| Desktop | 1440 | 40px |
js
const endpoint = "https://api.example.test/v1/really/long/path/segment/that/keeps/going/and/going/until/it/scrolls/horizontally?with=query&and=more";Installation
Import the control from
@fabrials/ai-ui, after setting the app up.TypeScript import { CodeBlock } from "@fabrials/ai-ui";import "@fabrials/ai-ui/styles.css";
API reference
| Prop / export | Type | Description |
|---|---|---|
code | string | Raw code used by copy and download. |
language | string | Shown in the header and used for the download name. |
children | ReactNode | Highlighted lines. Without it the raw code is shown. |
lineNumbers | boolean | Numbers each line. |
download | boolean | Adds a download action named after filename. A function replaces it. |
fui-markdown | class | Styles headings, lists, quotes, tables and code, including Streamdown data-streamdown output. |
Behavior
Presentational. The host supplies the markdown renderer and syntax highlighting; these pieces only style the result.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.