22+ AI agents Blocks based on shadcn/ui
22 blocks across 3 categories · free and PRO · React, Next.js, Tailwind CSS
Build AI-native product interfaces with one of the largest collections of shadcn/ui AI agent components: chat windows with streaming responses and file attachments, tool-use timelines, multi-step agent consoles, voice transcription, audio generation, agent activity feeds, and complete agent management pages. Every block is written in React and TypeScript on top of shadcn/ui primitives and Tailwind CSS, so it drops straight into Next.js, Vite, or Remix projects.
Copy the source directly from the preview or install any block with a single CLI command. The collection also includes x402 autonomous-commerce components for agent-initiated payments and HTTP-native stablecoin transactions, UI for the next generation of agentic apps.
Frequently asked questions
What are shadcn AI agent components?
They are pre-built React UI blocks for AI products, chat interfaces, agent consoles, tool-call timelines, transcription and audio-generation widgets, composed from shadcn/ui primitives and styled with Tailwind CSS. You copy the code into your project and own it completely.
How do I install an AI agent block?
Run npx @creative-tim/ui@latest add <block-name>, or use the shadcn CLI with the block's registry URL: npx shadcn@latest add https://www.creative-tim.com/ui/r/<block-name>.json. Both commands copy the component source and install its shadcn/ui dependencies automatically.
Do the chat components work with my own AI backend?
Yes. The blocks ship with simulated data so they render instantly, and the UI layer is decoupled from any provider, wire them to the Claude API, OpenAI, the Vercel AI SDK, or your own endpoints by replacing the mock handlers.
Are the AI agent blocks free to use?
Many blocks are free and open source. PRO blocks install the same way once you add a Creative Tim API key, which you can get at creative-tim.com/ui.
Can I use these blocks in v0, Lovable, or Claude?
Yes. Every block has a public registry JSON URL that AI tools can consume, and the full library is indexed for AI assistants at creative-tim.com/ui/llms.txt.
Do the components support dark mode?
All blocks use shadcn/ui theme tokens, so they follow your project's light and dark themes automatically, no extra configuration needed.
What are the x402 components for?
x402 is an HTTP-native payment protocol for autonomous agents. The x402 blocks provide checkout, payment-status, and transaction UI for agent-driven commerce flows using stablecoins.