# Introduction

pixilui is a library of product UI for AI apps: approval cards, run timelines, token meters, and the controls around them. Every item is React source that you install into your app and own. Nothing is imported from a package at runtime, so you can read it, change it and delete what you do not need.

## What you get

- **Components and patterns.** Buttons, inputs, dialogs and menus, plus the parts AI products need that general kits leave out: an agent asking before it acts, a tool call in a run, a streaming answer, a usage meter.
- **Blocks and screens.** Larger pieces (a settings page, a usage overview, an agent run screen) built from the same items, with sample data in one `data.ts` file.
- **One set of tokens.** Colour roles, radii, type sizes, shadows and motion presets live in one stylesheet, `foundation.css`. Every item reads the tokens through Tailwind utilities, so a theme change reaches every item at once.
- **Motion with rules.** Three springs and a short list of durations and easings, used the same way everywhere. See [Motion](/docs/motion).

## How it is delivered

pixilui is a [shadcn registry](https://ui.shadcn.com/docs/registry). You add it to `components.json` once, then install items with the shadcn CLI:

```bash
npx shadcn@latest add @pixilui/approval-card
```

The CLI copies the files into `components/pixilui/`, installs the npm packages the item needs (`motion`, `clsx`, `tailwind-merge`) and pulls in the items it depends on, including the foundation. See [Installation](/docs/installation).

## Free and Pro

The free tier is MIT licensed: components, patterns and some blocks, with full source on the site and in the registry. Pro adds screens, more blocks and agent skills. Pro previews, docs and props tables are public; the source and the install command need a licence.

## Built for coding agents

Every item page has a markdown twin at `/components/<slug>/markdown` with the whole page: install command, files with source, props, keyboard map and notes for AI. The site also publishes `llms.txt`, `llms-small.txt` and `llms-full.txt`, and an MCP server is coming. See [AI and agents](/docs/ai-and-agents).

## Requirements

- React 19 and Tailwind CSS v4.
- Next.js (App Router), Vite, or any React setup the shadcn CLI supports.
- Browsers with `color-mix()` (every evergreen browser since 2023). Accents use it to resolve light and dark values where they are used.