Product UI for AI apps.
Source you own.
Approval cards, run timelines, tool calls and the controls around them. Installed with the shadcn CLI, readable by your coding agent, and yours to edit.
npx shadcn@latest add @pixilui/run-timelineRun timelineThe line fills, then waits for you.
- Approval cardApprove, and it folds into a receipt.
- Thinking stateShows its work, then folds to a line.
- Tool call rowEvery call lands with its own timer.
- Streaming textUneven chunks in, steady words out.
- DialogBlooms out of a blur, never pops.
- DrawerLeaves at the speed you flick it.
- PopoverGrows from the corner that opened it.
- TooltipWaits once, then slides along the row.
- ButtonGrows into each new label.
- InputErrors rise in and name the fix.
Give it to your agent
Every component has a markdown page written for coding agents: when to use it, the props, and the mistakes to avoid. Paste one link into Claude Code or Cursor and it installs the right item with the right props.
- MarkdownAdd
/markdownto any component page. - llms.txtThe whole library in one file, rebuilt on every release.
- MCPSearch and install from inside the agent. Arrives with Pro.
Add a human approval step before the billing agent sends renewal reminders. Use the pixilui approval card: https://pixilui.com/components/approval-card/markdown Name the button "Approve and send". Show the template, the audience, the sender and the estimated cost, and fold to a receipt once someone decides.
# pixilui
> React components for AI products. Source you own,
> installed with the shadcn CLI.
## Components
- [Approval card](https://pixilui.com/components/approval-card/markdown): An agent asks before it acts.
- [Run timeline](https://pixilui.com/components/run-timeline/markdown): The steps of one agent run as a vertical timeline.
- [Streaming text](https://pixilui.com/components/streaming-text/markdown): Renders a model's answer as it streams.
- [Thinking state](https://pixilui.com/components/thinking-state/markdown): A quiet line that says what the agent is doing while it works, with a live timer, steps that unfold, and a fold into "Thought for 12s" when it is done.
- [Tool call row](https://pixilui.com/components/tool-call-row/markdown): One line per tool call.{
"mcpServers": {
"pixilui": {
"url": "https://pixilui.com/api/mcp",
"headers": {
"Authorization": "Bearer $PIXILUI_TOKEN"
}
}
}
}