About Loopkit

Loopkit is a library of React UI components and blocks. They are built for apps where AI agents do real work, and people still make the important calls.

You get the parts these apps tend to need: approval cards, run timelines, a streaming agent chat, a tool call viewer, and a tamper-evident audit log. There are also cinematic blocks for websites, such as heroes, navbars, pricing sections, and FAQs.

Loopkit is for developers and designers who build apps with AI agents. It also helps anyone who wants a polished website without starting from nothing.

If you work with React, TypeScript, and Tailwind CSS, you will feel at home. Use it for personal projects, commercial products, or client work.

1. Find a component. Browse the library and pick what you need, such as a budget guard or a diff review.

2. Try it. Every component has a live preview on this site. Change its props with the controls and see the result.

3. Get the code. Copy the source, or install it with the shadcn CLI in one command.

4. Make it yours. Adjust colours, motion, and layout to fit your app. Light and dark themes are included.

5. Keep people in charge. Use the approval cards, mode switch, and audit log so every step of an agent's work stays visible and reviewable.

Every component comes with a rebuild prompt. Give it to Claude Code, Cursor, Codex, or v0 to build the same piece in your own project.

Loopkit also runs an MCP server. Coding agents can search the library and pull components into your project. It works with Claude Code, Cursor, Codex, VS Code, Windsurf, and other tools.

The agent does the typing. You review what it adds.

The Free plan is part of the library and stays free.

Pro is a monthly plan. It gives you everything while you subscribe. If you want your money back after your first Pro payment, ask within 14 days.

Lifetime is a one-time payment. It includes everything and future updates. Lifetime is a final sale.

Sign in with an email link. There is no password. Your account shows your plan and your personal license key. Pro installs and the MCP server use that key.

You can use Loopkit in personal, commercial, and client projects. You may not resell the code as a kit or template pack.

Loopkit is built with React, TypeScript, Tailwind CSS, and framer-motion. Colours use shadcn tokens, so components match your theme.

Components are responsive, from phones to 4K screens. They are designed to work with the keyboard and screen readers. They respect reduced motion settings.

Email [email protected] for help with components, installs, your account, or your license.