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.tsfile. - 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.
How it is delivered#
pixilui is a shadcn registry. You add it to components.json once, then install items with the shadcn CLI:
npx shadcn@latest add @pixilui/approval-cardThe 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.
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.
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.