# AIcss

> Beautifully designed, copy-paste UI components for AI agent conversations: thinking states, tool calls, streaming text, citations, tables and more. Ships in React, Vue and Svelte with plain CSS and no Tailwind.

AIcss is a library of 12 UI components for AI agent conversations (thinking states, tool calls, streaming text, citations, tables, and more). 7 are free; the rest unlock with a one-time license. Every component ships React, Vue and Svelte code with plain CSS and no Tailwind.

## How to use the components programmatically

- Index of all components (JSON): https://www.aicss.dev/r
- A single component (JSON): https://www.aicss.dev/r/{slug}
- A single component (Markdown prompt): https://www.aicss.dev/r/{slug}?format=md
- Free component code is public. Licensed code requires an API token via the "Authorization: Bearer <token>" header (users get one at https://www.aicss.dev/account).

## Components

### Thinking & Reasoning

- [Thinking State](https://www.aicss.dev/components/thinking-state) (free): A minimal shimmering label that signals the agent is processing before it answers. Code: https://www.aicss.dev/r/thinking-state
- [Thinking + Reasoning](https://www.aicss.dev/components/thinking-reasoning) (free): An animated, collapsible thinking block: a shimmering label expands to reveal the agent's reasoning, then folds into a “Thought for Ns” summary. Code: https://www.aicss.dev/r/thinking-reasoning

### Tool & Action States

- [Web Search](https://www.aicss.dev/components/web-search) (licensed): A live web-search state: a shimmering query header and sources that resolve one by one, each globe morphing into a check. Code: https://www.aicss.dev/r/web-search
- [File Diff](https://www.aicss.dev/components/file-diff) (licensed): An inline diff card showing the additions and deletions the agent proposes. Code: https://www.aicss.dev/r/file-diff
- [Image Generation](https://www.aicss.dev/components/image-generation) (licensed): A shimmering canvas placeholder while an image is being generated. Code: https://www.aicss.dev/r/image-generation

### Text Outputs

- [Text Response](https://www.aicss.dev/components/text-response) (free): Clean prose styling for a standard assistant answer with inline code. Code: https://www.aicss.dev/r/text-response
- [Streaming Text](https://www.aicss.dev/components/streaming-text) (free): Typewriter-style streaming text with a blinking caret. Code: https://www.aicss.dev/r/streaming-text
- [Inline Citations](https://www.aicss.dev/components/inline-citations) (licensed): Superscript citation markers with a compact source footer. Code: https://www.aicss.dev/r/inline-citations
- [Code Block](https://www.aicss.dev/components/code-block) (free): A code block with a language label and one-click copy button. Code: https://www.aicss.dev/r/code-block

### Structured Outputs

- [To-do List](https://www.aicss.dev/components/task-list) (free): A Cursor-style to-do list the agent maintains: a collapsible header with done, in-progress and pending item states. Code: https://www.aicss.dev/r/task-list
- [Data Table](https://www.aicss.dev/components/data-table) (free): A tidy data table for structured comparisons and results. Code: https://www.aicss.dev/r/data-table
- [Comparison Table](https://www.aicss.dev/components/comparison-table) (licensed): A feature-by-plan comparison matrix with checkmarks. Code: https://www.aicss.dev/r/comparison-table

## Pages

- [Pricing](https://www.aicss.dev/pricing): One-time lifetime licenses. Personal and Enterprise.

## Notes

- Total components: 12 (7 free).
- Frameworks: React, Vue, Svelte. Styling: plain CSS with custom properties. No Tailwind, no UI dependencies.