# pixilui

> Designed product UI for AI apps: approval cards, run timelines, token meters and the controls around them. Source you own, installed with the shadcn CLI.

Install any item with the shadcn CLI after adding the registry to components.json: `"registries": { "@pixilui": "https://pixilui.com/r/{name}.json" }`, then `npx shadcn@latest add @pixilui/<slug>`. Items land in `components/pixilui/` and depend on `@pixilui/foundation` (tokens, motion presets, cn).

## layout

- [Foundation](https://pixilui.com/components/foundation/markdown): Tokens, motion presets and cn: the colour roles, radii, type scale, shadows and springs every pixilui item reads. (free)
- [Pro sample](https://pixilui.com/components/pro-sample/markdown): Placeholder Pro item that tests licence gating on the site and the Pro registry route. Not for shipping. (pro)

## ai

- [Approval card](https://pixilui.com/components/approval-card/markdown): An agent asks before it acts: what it will do, the rows that matter, the risk, and approve or reject with a note. (free)
- [Run timeline](https://pixilui.com/components/run-timeline/markdown): The steps of one agent run as a vertical timeline: a connector that fills as steps finish, a live timer on the active step, and a waiting step that holds an approval. (free)
- [Streaming text](https://pixilui.com/components/streaming-text/markdown): Renders a model's answer as it streams: only new words rise into place at reading speed, a caret holds the end, and half-arrived words wait until they are whole. (free)
- [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. (free)
- [Tool call row](https://pixilui.com/components/tool-call-row/markdown): One line per tool call: what it did in plain words, the tool's name, a live timer, and a fold-out with the input and output as copyable JSON. ToolCallRowGroup sums several calls into one line. (free)

## actions

- [Button](https://pixilui.com/components/button/markdown): A button whose label can change without a jump: the width springs to the new words while they swap in place. (free)

## overlays

- [Dialog](https://pixilui.com/components/dialog/markdown): A modal panel for one decision or one short task: a title, what happens, and the buttons that do it, with pending and error handled. (free)
- [Drawer](https://pixilui.com/components/drawer/markdown): A sheet that slides in from the right, left or bottom for details read alongside the page: a run, a trace, a record, a settings panel. (free)
- [Popover](https://pixilui.com/components/popover/markdown): A small panel anchored to a control for a closer look or a quick change: a run's budget, a model's settings, who can see a thread. (free)
- [Tooltip](https://pixilui.com/components/tooltip/markdown): A short text label for an icon button, with its keyboard shortcut, that waits 400ms and then opens neighbours instantly while you scan a toolbar. (free)

## inputs

- [Input](https://pixilui.com/components/input/markdown): A text field with its label, help, error, prefix and suffix slots and a clear button, wired for screen readers. (free)

## Optional

- [Everything in one file](https://pixilui.com/llms-full.txt): every item page, with source for free items
- [Compact reference](https://pixilui.com/llms-small.txt): when to use each item and its props